/*
 * The action column.
 *
 * The button artwork (green-button.png / golden-button.png) is deliberately
 * untouched. What changed around it: the remaining-actions counter is now a
 * brass dial, group captions are engraved into the board, and the game tools
 * are separated from the turn actions by a printed rule.
 */

.geometry-preview .zone-actions {
  display: block;
  padding: 0.85cqi 0.8cqi;
  overflow: hidden;
}

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

.action-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6cqi;
  padding-bottom: 0.7cqi;
  margin-bottom: 0.5cqi;
  border-bottom: 0.07cqi solid rgba(180, 148, 84, 0.24);
  color: rgba(196, 209, 195, 0.7);
  font-size: clamp(0.5rem, 0.6cqi, 0.74rem);
  text-align: left;
}

/* A brass dial showing how many actions are left this turn. */
.action-panel-head b {
  display: grid;
  place-items: center;
  width: 2.5cqi;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 246, 214, 0.5), transparent 44%),
    radial-gradient(circle at 48% 46%, #c9ab63, #7c6432 62%, #3d3018);
  color: #241c0b;
  font-family: var(--display-font);
  font-size: clamp(0.72rem, 0.92cqi, 1.1rem);
  font-weight: 600;
  text-shadow: 0 0.07cqi 0 rgba(255, 240, 200, 0.4);
  box-shadow:
    inset -0.1cqi -0.12cqi 0.16cqi rgba(0, 0, 0, 0.55),
    inset 0.08cqi 0.08cqi 0.12cqi rgba(255, 255, 255, 0.55),
    var(--lift-2);
}

.action-group {
  display: grid;
  gap: 0.5cqi;
  margin-top: 0.6cqi;
}

/* Caption engraved into the board above each group of actions. */
.action-group > span {
  color: rgba(172, 185, 171, 0.5);
  font-family: var(--display-font);
  font-size: clamp(0.42rem, 0.5cqi, 0.62rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 0.07cqi 0 rgba(0, 0, 0, 0.7);
}

.action-group button,
.finish-turn-button,
.modal-primary-action,
.modal-option-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 100%;
  min-height: 0;
  aspect-ratio: 300 / 55;
  border: 0;
  border-radius: 999px;
  background: url("../assets/images/green-button.png") center / 100% 100% no-repeat;
  color: #f3d47f;
  font-family: var(--display-font);
  font-size: clamp(0.52rem, 0.62cqi, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-shadow: 0 0.08cqi 0.12cqi #000;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.14s ease;
}

/* Resource glyph printed inside the gather button. */
.button-icon {
  font-size: 1.5em;
  filter: drop-shadow(0 0.07cqi 0.1cqi rgba(0, 0, 0, 0.85));
}

.button-icon.wood  { color: var(--wood-lit); }
.button-icon.stone { color: var(--stone-lit); }
.button-icon.tools { color: var(--tools-lit); }
.button-icon.food  { color: var(--food-lit); }

.action-group button:hover:not(:disabled),
.finish-turn-button:hover:not(:disabled),
.modal-primary-action:hover:not(:disabled),
.modal-option-list button:hover:not(:disabled) {
  filter: brightness(1.13);
  transform: translateY(-2%);
}

.action-group button:active:not(:disabled),
.finish-turn-button:active:not(:disabled) {
  transform: translateY(1%);
  filter: brightness(0.96);
}

.action-group button:disabled,
.finish-turn-button:disabled,
.modal-primary-action:disabled,
.modal-option-list button:disabled {
  opacity: 0.3;
  filter: grayscale(0.5);
  cursor: not-allowed;
}

.stabilize-action {
  margin-top: 0.6cqi;
}

.finish-turn-button {
  margin-top: 0.85cqi;
  background-image: url("../assets/images/golden-button.png");
}

/* Game tools sit below a printed rule, away from the turn actions. */
.action-panel-tools {
  display: grid;
  gap: 0.38cqi;
  margin-top: auto;
  padding-top: 0.8cqi;
  border-top: 0.07cqi solid rgba(180, 148, 84, 0.2);
}

.action-panel-tools button {
  width: 100%;
  min-height: 0;
  aspect-ratio: 300 / 55;
  border: 0;
  border-radius: 999px;
  background: url("../assets/images/green-button.png") center / 100% 100% no-repeat;
  color: #d3bd7e;
  font-family: var(--display-font);
  font-size: clamp(0.4rem, 0.48cqi, 0.6rem);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-shadow: 0 0.08cqi 0.12cqi #000;
  cursor: pointer;
  transition: filter 0.14s ease;
}

.action-panel-tools button:hover {
  filter: brightness(1.15);
}

.action-modal {
  width: min(52rem, 92vw);
  border: 2px solid rgba(180, 148, 84, 0.55);
}

.action-modal-note {
  padding: .7rem .85rem;
  border-radius: .45rem;
  background: rgba(25, 43, 29, .6);
  color: #d8e0d5;
}

.delivery-target {
  padding: .85rem 0;
}

.delivery-target h3 {
  margin: 0 0 .65rem;
  color: #efc475;
  font-size: .9rem;
}

.delivery-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}

.delivery-resource {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .6rem;
  border: 1px solid rgba(118, 146, 121, .58);
  border-radius: .38rem;
  background: rgba(10, 19, 12, .48);
}

.delivery-resource > span {
  color: #efc475;
}

.delivery-resource > div {
  display: grid;
  gap: .25rem;
}

.delivery-resource button {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid #a8c981;
  border-radius: .25rem;
  background: linear-gradient(145deg, rgba(48, 74, 42, .96), rgba(21, 39, 24, .96));
  color: #efffb7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 .42rem rgba(190, 232, 120, .22);
  text-shadow: 0 0 .25rem rgba(224, 255, 161, .35);
  cursor: pointer;
  transition: filter .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.delivery-resource button:hover:not(:disabled),
.trade-stepper button:hover:not(:disabled) {
  filter: brightness(1.22);
  border-color: #d3ef99;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 .65rem rgba(199, 238, 126, .38);
}

.delivery-resource button:focus-visible,
.trade-stepper button:focus-visible {
  outline: 2px solid #d8f39c;
  outline-offset: 2px;
}

.delivery-resource button:disabled,
.trade-stepper button:disabled {
  border-color: rgba(82, 99, 84, .48);
  background: rgba(12, 20, 14, .62);
  color: rgba(153, 168, 151, .38);
  box-shadow: none;
  text-shadow: none;
  opacity: .48;
  filter: grayscale(.8) saturate(.35);
  cursor: not-allowed;
}

.delivery-warning {
  color: #e6a36e;
  font-size: .78rem;
}

.delivery-total {
  margin-top: .75rem;
  text-align: right;
  color: #cdd7ca;
}

.modal-primary-action {
  display: block;
  width: min(18rem, 100%);
  margin: .8rem auto 0;
  background-image: url("../assets/images/golden-button.png");
}

.action-modal label {
  display: grid;
  gap: .35rem;
  color: #cbd7c8;
}

.action-modal select {
  width: 100%;
  padding: .65rem;
  border: 1px solid #607362;
  background: rgba(8, 15, 10, .86);
  color: #e3e9e0;
}

.trade-station-select {
  margin-top: .75rem;
}

.trade-plan-section {
  padding: .8rem 0;
}

.trade-plan-section h3 {
  margin: 0 0 .6rem;
  color: #efc475;
  font-size: .92rem;
}

.trade-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.trade-resource-cell {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .2rem .45rem;
  min-width: 0;
  padding: .58rem;
  border: 1px solid rgba(118, 146, 121, .5);
  border-radius: .38rem;
  background: rgba(10, 19, 12, .48);
}

.trade-resource-value {
  color: #efc475;
  white-space: nowrap;
}

.trade-resource-cell small {
  grid-column: 1;
  color: rgba(205, 215, 202, .62);
  font-size: .66rem;
}

.trade-stepper {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: .22rem;
}

.trade-stepper button {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid #a8c981;
  border-radius: .25rem;
  background: linear-gradient(145deg, rgba(48, 74, 42, .96), rgba(21, 39, 24, .96));
  color: #efffb7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 .42rem rgba(190, 232, 120, .22);
  text-shadow: 0 0 .25rem rgba(224, 255, 161, .35);
  cursor: pointer;
  transition: filter .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.trade-plan-total {
  margin-top: .8rem;
  color: #d6dfd3;
  text-align: center;
}

.modal-option-list {
  display: grid;
  justify-items: center;
  gap: .65rem;
}

.modal-option-list button {
  width: min(19rem, 100%);
}

.action-modal-mood {
  width: min(45rem, 92vw);
  min-height: 9rem;
}

.action-modal-mood .modal-head {
  height: 0;
  margin: 0;
  overflow: visible;
  justify-content: flex-end;
}

.mood-combination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem;
  margin: .35rem 3.3rem 1rem 0;
  color: #d8e0d5;
  font-size: .82rem;
}

.mood-combination strong {
  margin-right: .18rem;
  color: #e1e5df;
}

.mood-combination span {
  color: #e7d6ae;
}

.mood-combination span:not(:last-child)::after {
  content: " ·";
  color: #aeb8ab;
}

.mood-combination span.missing {
  color: #a99d91;
  opacity: .55;
}

@media (max-width: 800px) {
  .delivery-resource-grid,
  .trade-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Resource glyphs inside the action modals carry the same piece colours. */
.delivery-resource .game-icon,
.trade-resource-value .game-icon,
.mood-combination .game-icon,
.modal-option-list .game-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.22em;
}

.delivery-resource .wood,  .trade-resource-value .wood,  .mood-combination .wood  { color: var(--wood-face); }
.delivery-resource .stone, .trade-resource-value .stone, .mood-combination .stone { color: var(--stone-face); }
.delivery-resource .tools, .trade-resource-value .tools, .mood-combination .tools { color: var(--tools-face); }
.delivery-resource .food,  .trade-resource-value .food,  .mood-combination .food  { color: var(--food-face); }

.field-squad {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.16em;
  color: var(--gold);
}

/*
 * Modals live outside `.game-board`, so the `cqi` font sizes shared with the
 * board's action buttons collapse there. Give the modal versions their own
 * viewport-relative scale.
 */
.modal-primary-action,
.modal-option-list button {
  font-size: clamp(0.78rem, 1.05vw, 1rem);
  letter-spacing: 0.09em;
}

.action-modal {
  border-color: rgba(180, 148, 84, 0.55);
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.delivery-resource .game-icon,
.trade-resource-value .game-icon,
.mood-combination .game-icon,
.modal-option-list .game-icon {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.3em;
}