/*
 * Loose components: the die and its tray, the two printed tracks and their
 * pawns, the city reserve bins, and the two card stacks.
 *
 * Rule of thumb used throughout: anything PRINTED on the board is recessed
 * (`--well`) and low contrast; anything that is a PIECE is domed, lit from the
 * upper left, and casts a shadow (`--lift-*`).
 */

/* Engraved caption printed onto the board. */
.board-piece-label {
  display: block;
  color: rgba(196, 209, 195, 0.62);
  font-family: var(--display-font);
  font-size: clamp(0.45rem, 0.55cqi, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 0.08cqi 0 rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------------------ die -- */

.dice-piece {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  gap: 0.45cqi;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/*
 * A shallow leather tray sunk into the board, where the die comes to rest.
 * The zone is wider than it is tall, so the tray is sized from its height.
 */
.dice-tray {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 22%;
  background:
    radial-gradient(72% 62% at 50% 34%, rgba(120, 92, 52, 0.22), transparent 70%),
    linear-gradient(160deg, #241d13, #14100a 62%, #0c0906);
  box-shadow:
    inset 0 0 0 0.1cqi rgba(163, 132, 74, 0.34),
    inset 0 0.36cqi 0.7cqi rgba(0, 0, 0, 0.85),
    inset 0 -0.12cqi 0.2cqi rgba(255, 216, 150, 0.09),
    0 0.12cqi 0 rgba(255, 255, 255, 0.05);
}

/* The die's cast shadow, which stays on the tray while the die tumbles. */
.dice-tray::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 17%;
  width: 46%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.72), transparent);
  filter: blur(0.22cqi);
}

.die-piece {
  position: relative;
  z-index: 1;
  width: 56%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 11%;
  border-radius: 19%;
  background:
    /* the lit top-left corner of a carved bone die */
    radial-gradient(90% 90% at 26% 22%, rgba(255, 240, 205, 0.5), transparent 58%),
    linear-gradient(150deg, #d9c9a4 4%, #a48f65 44%, #6d5b3a 78%, #4a3c25);
  box-shadow:
    inset 0.16cqi 0.16cqi 0.24cqi rgba(255, 248, 222, 0.62),
    inset -0.22cqi -0.26cqi 0.4cqi rgba(0, 0, 0, 0.6),
    inset 0 0 0 0.07cqi rgba(66, 52, 30, 0.55),
    var(--lift-2);
  transform: rotate(-3deg);
}

.die-cell {
  display: grid;
  place-items: center;
}

/* Pips are drilled into the face, so they are dark with a lit lower rim. */
.die-cell i {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #2a2114, #150f08 62%, #241c11);
  box-shadow:
    inset 0.06cqi 0.07cqi 0.1cqi rgba(0, 0, 0, 0.9),
    0 0.06cqi 0.02cqi rgba(255, 240, 205, 0.34);
}

.die-piece.is-unrolled {
  background:
    radial-gradient(90% 90% at 26% 22%, rgba(255, 240, 205, 0.34), transparent 58%),
    linear-gradient(150deg, #9d8f74 4%, #75674a 46%, #4b3f28 82%);
}

.die-question {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #33291a;
  font-family: var(--display-font);
  font-size: clamp(0.9rem, 2.1cqi, 2.4rem);
  font-weight: 600;
  text-shadow: 0 0.08cqi 0 rgba(255, 240, 205, 0.35);
}

/* One short tumble when a new value arrives. */
.die-piece.is-rolling {
  animation: die-tumble 0.55s cubic-bezier(0.3, 1.4, 0.5, 1);
}

@keyframes die-tumble {
  0%   { transform: rotate(-3deg) scale(1); }
  25%  { transform: rotate(-24deg) scale(1.14) translateY(-8%); }
  55%  { transform: rotate(16deg) scale(1.08) translateY(-3%); }
  80%  { transform: rotate(-7deg) scale(1.01); }
  100% { transform: rotate(-3deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .die-piece.is-rolling { animation: none; }
}

/* -------------------------------------------------------------- reserve -- */

.reserve-piece {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.reserve-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.42cqi;
  margin-top: 0.42cqi;
}

/* Each resource sits in its own recessed bin. */
.reserve-resource {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75cqi;
  padding-left: 0.4cqi;
  border-radius: 0.3cqi;
  isolation: isolate;
  background: linear-gradient(rgba(6, 11, 8, 0.5), rgba(4, 8, 6, 0.34));
  box-shadow:
    inset 0 0 0 0.07cqi rgba(163, 132, 74, 0.2),
    inset 0 0.12cqi 0.24cqi rgba(0, 0, 0, 0.6);
}

/*
 * The bank holds the same cubes the players do, drawn as a short stack: two
 * pseudo-element cubes sit behind the face that carries the resource mark.
 */
.reserve-cube {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.15cqi;
  height: 2.15cqi;
  border-radius: 0.18cqi;
  background: linear-gradient(148deg, var(--face-lit), var(--face) 46%, var(--face-dark));
  color: color-mix(in srgb, var(--face-dark) 66%, #080a06);
  box-shadow:
    inset 0.11cqi 0.11cqi 0.15cqi rgba(255, 255, 255, 0.42),
    inset -0.13cqi -0.15cqi 0.2cqi rgba(0, 0, 0, 0.52),
    var(--lift-1);
}

.reserve-cube::before,
.reserve-cube::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(148deg, var(--face), var(--face-dark) 60%);
  box-shadow: 0 0.1cqi 0.16cqi rgba(0, 0, 0, 0.5);
}

.reserve-cube::before { transform: translate(-26%, 18%) scale(0.9); filter: brightness(0.82); }
.reserve-cube::after  { transform: translate(-13%, 9%) scale(0.95); filter: brightness(0.92); }

.reserve-cube .game-icon {
  width: 66%;
  height: 66%;
}

.reserve-resource.wood  { --face-lit: var(--wood-lit);  --face: var(--wood-face);  --face-dark: var(--wood); }
.reserve-resource.stone { --face-lit: var(--stone-lit); --face: var(--stone-face); --face-dark: var(--stone); }
.reserve-resource.tools { --face-lit: var(--tools-lit); --face: var(--tools-face); --face-dark: var(--tools); }
.reserve-resource.food  { --face-lit: var(--food-lit);  --face: var(--food-face);  --face-dark: var(--food); }

.reserve-resource strong {
  color: var(--gold);
  font-family: var(--display-font);
  font-size: clamp(0.68rem, 0.85cqi, 1.02rem);
  font-weight: 600;
  text-shadow: 0 0.08cqi 0.12cqi #000;
}

/* --------------------------------------------------------------- tracks -- */

.tracks-piece {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.5cqi;
}

.token-track {
  min-width: 0;
}

/* A groove routed into the board, with the sockets sitting along it. */
.track-positions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: 0.28cqi;
  margin-top: 0.36cqi;
  padding: 0 0.1cqi;
}

.track-positions::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 0.24cqi;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(150, 168, 148, 0.14));
}

/* The mood scale is shorter than the round scale, so its rail simply ends. */
.mood-track .track-positions {
  width: 75%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Printed socket: recessed, engraved number, no fill. */
.track-position {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(rgba(4, 8, 6, 0.85), rgba(14, 22, 16, 0.6));
  color: rgba(198, 211, 196, 0.6);
  font-style: normal;
  box-shadow:
    inset 0 0 0 0.06cqi rgba(163, 132, 74, 0.28),
    inset 0 0.1cqi 0.2cqi rgba(0, 0, 0, 0.8),
    0 0.06cqi 0 rgba(255, 255, 255, 0.06);
}

.track-position b {
  position: relative;
  z-index: 2;
  font-family: var(--display-font);
  font-size: clamp(0.4rem, 0.52cqi, 0.64rem);
  font-weight: 500;
  line-height: 1;
}

.track-position .game-icon {
  width: 0.72cqi;
  height: 0.72cqi;
}

/* The end-of-track socket is printed in warning red. */
.track-position.is-doom {
  color: rgba(214, 122, 110, 0.72);
  box-shadow:
    inset 0 0 0 0.06cqi rgba(180, 82, 72, 0.4),
    inset 0 0.1cqi 0.2cqi rgba(0, 0, 0, 0.8);
}

/*
 * The pawn: a domed wooden marker resting in the socket. It is a separate
 * layer so it can overhang the socket and cast a shadow onto the board.
 */
.track-position.current {
  color: #1c2712;
}

.track-position.current::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 224, 0.95), transparent 34%),
    radial-gradient(circle at 46% 42%, #dff49b, #a3cd60 58%, #4e7a2f 88%);
  box-shadow:
    inset -0.1cqi -0.12cqi 0.18cqi rgba(30, 58, 18, 0.62),
    inset 0.08cqi 0.08cqi 0.1cqi rgba(255, 255, 255, 0.55),
    var(--lift-2);
}

.mood-track .track-position.current::before {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 246, 214, 0.95), transparent 34%),
    radial-gradient(circle at 46% 42%, #f4dc9d, #d3ac5c 58%, #86622a 88%);
}

.mood-track .track-position.current { color: #2a1f0c; }

/* Mood at zero: the pawn is on the skull. */
.mood-track .track-position.current.is-doom::before {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 224, 214, 0.9), transparent 34%),
    radial-gradient(circle at 46% 42%, #e8938a, #c05045 58%, #6e2621 88%);
}

.mood-track .track-position.current.is-doom { color: #2a100d; }

/* ---------------------------------------------------------- card stacks -- */

/*
 * A deck is drawn as three layers: two offset cards behind (`::before`,
 * `::after` on the wrapper) and the printed face on top.
 */
.deck-stack {
  position: relative;
  width: auto;
  height: 90%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}

.deck-stack::before,
.deck-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.3cqi;
  background: linear-gradient(150deg, #2a2b1f, #16170f);
  box-shadow: 0 0.16cqi 0.3cqi rgba(0, 0, 0, 0.66), inset 0 0 0 0.06cqi rgba(163, 132, 74, 0.22);
}

.deck-stack::before { transform: rotate(-2.6deg) translate(-1.6%, 1.4%); }
.deck-stack::after  { transform: rotate(1.9deg) translate(1.4%, 0.8%); }

.deck-back-piece {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 0.3cqi;
  background-image: url("../assets/images/problem-card-vignette.png");
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 0.07cqi rgba(196, 164, 96, 0.4),
    inset 0 0 1.4cqi rgba(0, 0, 0, 0.6),
    var(--lift-3);
  transform: rotate(-0.5deg);
}

.deck-back-piece::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(17, 41, 23, 0.42);
}

.deck-back-piece.is-event {
  background-position: 68% center;
  transform: rotate(0.8deg);
}

.deck-back-piece.is-event::before {
  background: rgba(54, 32, 62, 0.42);
}

.deck-back-piece.is-problem {
  background-position: 82% center;
}

/* The title is printed on a band across the foot of the card back. */
.deck-back-piece strong {
  width: 100%;
  padding: 0.55cqi 0.3cqi 0.6cqi;
  background: linear-gradient(rgba(6, 10, 7, 0), rgba(5, 9, 6, 0.86) 42%);
  color: var(--gold);
  font-family: var(--display-font);
  font-size: clamp(0.55rem, 0.72cqi, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: center;
  text-shadow: 0 0.1cqi 0.2cqi #000;
}