/*
 * A player's station: a printed plate on the board holding a role card, an
 * inventory of physical cubes, two squad pawns, and a nameplate.
 *
 * `--station-color` is set inline from the seat colour. It is used as a printed
 * accent (rules, nameplate, active glow) and never as a large filled area, so
 * four different seats can share one board without shouting at each other.
 */

.horizontal-station,
.vertical-station {
  --station-color: #a9df8a;
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  gap: 0.5cqi;
  padding: 0.58cqi;
  border-radius: 0.5cqi;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.05), transparent 42%),
    linear-gradient(rgba(27, 38, 31, 0.8), rgba(14, 21, 16, 0.9));
  box-shadow:
    inset 0 0 0 0.09cqi color-mix(in srgb, var(--station-color) 30%, transparent),
    var(--well);
  text-align: left;
}

/* The same paper grain the rest of the board carries. */
.horizontal-station::before,
.vertical-station::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--grain) repeat;
  background-size: 9cqi;
  mix-blend-mode: overlay;
  opacity: 0.28;
  pointer-events: none;
}

.horizontal-station > *,
.vertical-station > * {
  position: relative;
  z-index: 1;
}

.horizontal-station {
  grid-template-columns: 32fr 33fr 35fr;
  grid-template-rows: minmax(0, 1fr);
}

.vertical-station {
  --station-color: #e5bd77;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 33fr 45fr 22fr;
}

/* The seat whose turn it is: a lit rule plus a soft glow, not a colour flood. */
.horizontal-station.is-active,
.vertical-station.is-active {
  box-shadow:
    inset 0 0 0 0.13cqi color-mix(in srgb, var(--station-color) 68%, transparent),
    inset 0 0 1.6cqi color-mix(in srgb, var(--station-color) 12%, transparent),
    var(--well),
    0 0 1.4cqi color-mix(in srgb, var(--station-color) 22%, transparent);
}

/* ------------------------------------------------------------- sub-plates -- */

.station-inventory,
.station-location {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.5cqi;
  border-radius: 0.36cqi;
  background: linear-gradient(rgba(6, 11, 8, 0.5), rgba(4, 8, 6, 0.3));
  box-shadow:
    inset 0 0 0 0.06cqi rgba(163, 132, 74, 0.16),
    inset 0 0.1cqi 0.22cqi rgba(0, 0, 0, 0.55);
}

/* The role card is a real card lying on the station, so it lifts instead. */
.station-role-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1.05cqi 1.1cqi;
  border-radius: 0.32cqi;
  background-color: #151910;
  background-image: url("../assets/images/role-card-landscape.png");
  background-position: center;
  /* Just past 100%: the art has a thin black margin baked into its edges. */
  background-size: 101.6% 102.2%;
  background-repeat: no-repeat;
  box-shadow: var(--lift-3);
  transform: rotate(-0.35deg);
}

.vertical-station .station-role-card {
  padding: 1.05cqi 0.92cqi;
  background-image: url("../assets/images/role-card-portrait.png");
  background-size: 100% 101.5%;
  transform: rotate(0.4deg);
}

/* ------------------------------------------------------------------ text -- */

.station-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4cqi;
  color: rgba(180, 193, 179, 0.66);
  font-family: var(--display-font);
  font-size: clamp(0.38rem, 0.54cqi, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0.07cqi 0 rgba(0, 0, 0, 0.7);
}

.inventory-count {
  color: rgba(214, 190, 130, 0.72);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.station-role-card .station-label {
  display: block;
  color: rgba(215, 181, 107, 0.9);
}

.station-role-card strong {
  display: block;
  margin-top: 0.3cqi;
  color: #f2cd7d;
  font-family: var(--display-font);
  font-size: clamp(0.7rem, 0.92cqi, 1.14rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0.1cqi 0.16cqi rgba(0, 0, 0, 0.85);
}

.station-role-card p {
  margin: 0.4cqi 0 0;
  color: #e6cd97;
  font-size: clamp(0.52rem, 0.63cqi, 0.79rem);
  line-height: 1.4;
  text-shadow: 0 0.06cqi 0.12cqi rgba(0, 0, 0, 0.8);
}

.vertical-station .station-role-card strong { font-size: clamp(0.64rem, 0.84cqi, 1rem); }
.vertical-station .station-role-card p { font-size: clamp(0.5rem, 0.6cqi, 0.76rem); }

.station-location strong {
  display: flex;
  align-items: center;
  gap: 0.34cqi;
  margin-top: 0.36cqi;
  color: #e4ebe1;
  font-family: var(--display-font);
  font-size: clamp(0.6rem, 0.74cqi, 0.92rem);
  font-weight: 500;
}

.station-location strong .game-icon {
  color: color-mix(in srgb, var(--station-color) 78%, #cfd8cc);
  font-size: 0.92em;
}

.station-location p {
  display: flex;
  align-items: center;
  gap: 0.3cqi;
  margin: 0.36cqi 0 0;
  color: #cbd5c8;
  font-size: clamp(0.55rem, 0.66cqi, 0.82rem);
}

/* A large ghosted resource mark fills the quiet half of the location panel. */
.station-location {
  position: relative;
}

.location-watermark {
  position: absolute;
  z-index: 0;
  right: -1.2cqi;
  bottom: -1.6cqi;
  width: 7.5cqi;
  height: 7.5cqi;
  opacity: 0.075;
  pointer-events: none;
}

.station-location > *:not(.location-watermark) {
  position: relative;
  z-index: 1;
}

.station-location .yield-icon {
  font-size: clamp(0.72rem, 0.94cqi, 1.15rem);
}

.station-location.wood  .yield-icon { color: var(--wood-face); }
.station-location.stone .yield-icon { color: var(--stone-face); }
.station-location.tools .yield-icon { color: var(--tools-face); }
.station-location.food  .yield-icon { color: var(--food-face); }

/* --------------------------------------------------------- bonus tokens -- */

/* Pending extra actions, stacked as small brass chits on the role card. */
.bonus-action-tokens {
  position: absolute;
  z-index: 2;
  top: 0.5cqi;
  right: 0.56cqi;
  display: flex;
  gap: 0.26cqi;
}

.bonus-action-tokens i {
  display: grid;
  place-items: center;
  width: 1.3cqi;
  height: 1.3cqi;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 224, 0.85), transparent 40%),
    radial-gradient(circle at 46% 44%, #a8e070, #4e9040 62%, #22532a);
  color: #f6ffe0;
  font-size: clamp(0.58rem, 0.78cqi, 0.95rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0.06cqi 0.1cqi rgba(12, 32, 12, 0.9);
  box-shadow:
    inset -0.08cqi -0.1cqi 0.14cqi rgba(18, 48, 18, 0.7),
    inset 0.07cqi 0.07cqi 0.1cqi rgba(255, 255, 255, 0.5),
    var(--lift-1);
}

/* ------------------------------------------------------- inventory cubes -- */

/*
 * Cube size is fixed rather than fluid: the plate is short, and letting the
 * cubes grow to fill the width pushed the squad row off the bottom.
 */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(6, 1.62cqi);
  grid-auto-rows: 1.62cqi;
  gap: 0.24cqi;
  margin-top: 0.3cqi;
}

/* Vertical stations are narrow and tall, so the same twelve slots stack 3x4. */
.vertical-station .inventory-grid {
  grid-template-columns: repeat(3, 2.15cqi);
  grid-auto-rows: 2.15cqi;
  gap: 0.26cqi;
}

/*
 * A cube is a piece: lit from the upper left, darker on the lower right, with
 * the resource mark stamped into its face.
 */
.resource-cube {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.16cqi;
  font-size: 0.72em;
  font-style: normal;
}

.resource-cube .game-icon {
  width: 68%;
  height: 68%;
}

/* Empty slots are printed sockets, not pieces. */
.resource-cube.is-empty {
  background: linear-gradient(rgba(3, 7, 5, 0.72), rgba(14, 22, 16, 0.42));
  box-shadow:
    inset 0 0 0 0.055cqi rgba(163, 132, 74, 0.15),
    inset 0 0.08cqi 0.16cqi rgba(0, 0, 0, 0.7);
}

.resource-cube.has-resource {
  background: linear-gradient(148deg, var(--face-lit), var(--face) 46%, var(--face-dark));
  /* The mark is stamped into the cube, so it is darker than the face. */
  color: color-mix(in srgb, var(--face-dark) 66%, #080a06);
  box-shadow:
    inset 0.1cqi 0.1cqi 0.14cqi rgba(255, 255, 255, 0.42),
    inset -0.12cqi -0.14cqi 0.2cqi rgba(0, 0, 0, 0.52),
    var(--lift-1);
}

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

/* ------------------------------------------------------------ squad pawns -- */

.squad-label {
  margin-top: 0.42cqi;
}

.squad-row {
  display: flex;
  gap: 0.4cqi;
  margin-top: 0.28cqi;
}

/* A worker pawn standing on a small round base. */
.squad-token {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.7cqi;
  height: 1.7cqi;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 244, 214, 0.42), transparent 46%),
    radial-gradient(circle at 48% 46%, #8a7145, #4b3b20 64%, #241a0e);
  color: #f0d494;
  font-size: 1.35cqi;
  font-style: normal;
  box-shadow:
    inset -0.1cqi -0.12cqi 0.16cqi rgba(0, 0, 0, 0.65),
    inset 0.08cqi 0.08cqi 0.12cqi rgba(255, 255, 255, 0.32),
    var(--lift-1);
}

.squad-token .game-icon {
  width: 74%;
  height: 74%;
  filter: drop-shadow(0 0.05cqi 0.06cqi rgba(0, 0, 0, 0.7));
}

/* Away on a problem: the base is empty and only a printed outline remains. */
.squad-token.deployed {
  background: linear-gradient(rgba(3, 7, 5, 0.7), rgba(14, 22, 16, 0.4));
  color: rgba(160, 141, 104, 0.42);
  box-shadow:
    inset 0 0 0 0.06cqi rgba(163, 132, 74, 0.24),
    inset 0 0.08cqi 0.18cqi rgba(0, 0, 0, 0.7);
}

.squad-token.deployed .game-icon { filter: none; }

/* -------------------------------------------------------------- nameplate -- */

/* An engraved plate screwed to the edge of the station, not a coloured pill. */
.station-name-badge {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: -0.78cqi;
  transform: translateX(-50%);
  min-width: 5cqi;
  padding: 0.28cqi 0.92cqi;
  border-radius: 0.22cqi;
  background: linear-gradient(160deg, #262f27, #121a14 70%);
  color: color-mix(in srgb, var(--station-color) 82%, #f2f6ee);
  font-family: var(--display-font);
  font-size: clamp(0.52rem, 0.64cqi, 0.79rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0.08cqi 0.1cqi #000;
  box-shadow:
    inset 0 0 0 0.07cqi color-mix(in srgb, var(--station-color) 42%, #33402f),
    inset 0 0.08cqi 0 rgba(255, 255, 255, 0.14),
    var(--lift-2);
}

/* Turn marker: a printed tab clipped over the top edge of the station. */
.station-turn-marker {
  position: absolute;
  z-index: 6;
  top: -0.5cqi;
  right: 0.9cqi;
  display: flex;
  align-items: center;
  gap: 0.28cqi;
  padding: 0.22cqi 0.6cqi;
  border-radius: 0.2cqi;
  background: linear-gradient(160deg, color-mix(in srgb, var(--station-color) 92%, #fff), var(--station-color));
  color: #101a10;
  font-family: var(--display-font);
  font-size: clamp(0.44rem, 0.55cqi, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--lift-2), inset 0 0.08cqi 0 rgba(255, 255, 255, 0.45);
}