/* Game-specific illustration and composition; no shared control recipes. */

@import url("./surfaces.css");
/* Studio miniatures: original SVG objects on warm enamel and timber surfaces. */
.game-mode {
  --shuffle-ink: #2e4845;
  --shuffle-edge: #c9c9af;
  --shuffle-shadow: #34453b;
}
.shuffle-icon {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  user-select: none;
  filter: drop-shadow(0 3px 2px #263e4320);
}
.game-mode .icon-button {
  background: linear-gradient(#fffdf4, #ece9d8);
  border: 1px solid #d5d6bf;
  border-radius: 9px;
  box-shadow: 0 2px 0 #bdc6af;
  color: #456657;
}
.control-icon {
  width: 24px;
  height: 24px;
  margin: auto;
}
#play-toggle .shuffle-icon {
  width: 25px;
  height: 25px;
}
.game-mode .rw-section-tabs {
  background: #f5f2e6;
  border-bottom-color: #dbdbc6;
}
.game-mode .store-art {
  position: relative;
  height: 164px;
  display: grid;
  place-items: center;
  border: 1px solid #e4dec8;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, #fffdf5c0, transparent 70%),
    linear-gradient(135deg, #e6ebd6, #d3ddc5);
  box-shadow: inset 0 2px 6px #657e4f12;
}
.game-mode .store-art::before {
  content: "";
  position: absolute;
  width: 135px;
  height: 70px;
  bottom: 15px;
  border-radius: 50%;
  background: #fff9e455;
  border: 1px solid #fff9e4;
  transform: rotate(-8deg);
}
.game-mode .store-art > .shuffle-icon {
  width: 138px;
  height: 145px;
  position: relative;
  transition: transform 0.25s;
  filter: drop-shadow(0 7px 5px #304d422b);
}
.game-mode .store-card:hover .store-art > .shuffle-icon {
  transform: translateY(-4px) rotate(-2deg);
}
.game-mode .store-card .store-price b {
  color: #42624e;
}
@media (prefers-reduced-motion: reduce) {
  .game-mode .shuffle-icon {
    transition: none;
  }
  .game-mode .store-card:hover .shuffle-icon {
    transform: none;
  }
}

.game-mode .agent-button {
  width: auto;
  min-width: 42px;
  padding-inline: 6px;
  font-size: 11px;
}

.cafeteria-store .cards-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cafeteria-store {
  margin-block-end: 28px;
}

.campus-store {
  padding: 24px;
  margin-block-end: 28px;
  background: linear-gradient(135deg, #f5f2df, #e4eddd);
}
.campus-store > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.campus-store h2 {
  margin: 8px 0;
}
.campus-store p {
  font-size: 12px;
  line-height: 1.7;
}
.campus-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 22px 0;
  list-style: none;
}
.campus-stages li {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid #cbd7bf;
  border-radius: 8px;
  background: #ffffff75;
}
.campus-stages span {
  font-size: 10px;
  color: #768569;
}
.campus-stages strong {
  font-size: 12px;
  line-height: 1.5;
}
.campus-stages .current {
  background: #3d6552;
  color: #fffbe8;
}
.campus-stages .current span {
  color: #d2e2b9;
}
.campus-lease {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-block-start: 1px solid #bdcdb3;
  padding-block-start: 16px;
}
.campus-lease h3 {
  margin: 0;
}
.campus-lease small {
  color: #62795e;
  font-size: 11px;
}
.campus-lease > .rw-button {
  flex-shrink: 0;
}
.campus-controls {
  display: flex;
  gap: 6px;
  margin-block: 10px;
}
.campus-controls .rw-button {
  padding: 7px 8px;
  font-size: 9px;
  min-height: 34px;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.campus-controls [aria-pressed="true"] {
  background: #3d6552;
  color: #fffbea;
}
.campus-controls .rw-button:focus-visible,
.campus-directory .text-button:focus-visible {
  outline: 2px solid #547c65;
  outline-offset: 3px;
}
.campus-controls .rw-button:hover {
  box-shadow: inset 0 0 0 1px #6d8c7155;
}
@media (prefers-reduced-motion: reduce) {
  .campus-controls .rw-button {
    transition: none;
  }
}
.campus-directory {
  display: grid;
  gap: 5px;
  max-height: 155px;
  overflow: auto;
  margin-block: 10px;
}
.campus-directory .text-button {
  text-align: left;
  font-size: 10px;
  line-height: 1.5;
  border-radius: 4px;
}
.campus-directory .text-button:hover {
  background: #e6ecdf;
}

.property-board {
  margin-block: 28px 36px;
}
.property-heading,
.owned-property > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.property-heading h2 {
  font-size: 27px;
  margin: 8px 0;
}
.property-heading p {
  font-size: 13px;
  color: #63785e;
}
.property-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-block: 18px;
}
.property-summary > div {
  padding: 14px;
  background: #edf1e1;
  border: 1px solid #d0dac2;
  border-radius: 8px;
  display: grid;
  gap: 8px;
}
.property-summary span {
  font-size: 10px;
  color: #5d765e;
}
.property-summary strong {
  font-size: 23px;
  color: #365e4e;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.property-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-block: 24px;
}
.property-offer {
  padding: 22px;
  border-block-start: 4px solid #78966b;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.property-offer h3 {
  font-size: 23px;
  margin: 12px 0;
}
.property-price {
  font-size: 28px;
  color: #365e4e;
}
.property-offer p {
  font-size: 12px;
  line-height: 1.7;
}
.property-offer dl {
  width: 100%;
  font-size: 12px;
}
.property-offer dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 7px;
  border-block-end: 1px solid #dbe2ce;
}
.property-offer dd {
  margin: 0;
  font-weight: 700;
}
.property-offer > .rw-button {
  margin-block-start: auto;
}
.owned-properties {
  display: grid;
  gap: 18px;
  margin-block: 20px;
}
.owned-property {
  padding: 24px;
  margin-block: 20px;
  scroll-margin-block-start: 70px;
}
.owned-property h3 {
  margin: 8px 0;
  font-size: 23px;
}
.owned-property meter {
  width: 100%;
  accent-color: #6e9267;
  height: 12px;
}
.owned-property .property-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.owned-property .property-summary strong {
  font-size: 21px;
}
.property-build {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-block: 18px;
  font-size: 12px;
}
.construction-status {
  padding: 14px;
  border: 1px dashed #b29b66;
  border-radius: 8px;
  background: #f6edd3;
  font-size: 13px;
}
.property-tenancy {
  display: grid;
  grid-template-columns: 1fr 220px auto;
  align-items: center;
  gap: 18px;
  border-block-start: 1px solid #cfd9c0;
  padding-block-start: 18px;
  margin-block-start: 20px;
}
.property-tenancy > small {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #6e8067;
}
.property-tenancy label {
  display: grid;
  gap: 8px;
  font-size: 11px;
}
.property-tenancy input {
  width: 100%;
}
.property-income {
  display: grid;
  gap: 7px;
}
.property-income span {
  font-size: 11px;
}
.property-income strong {
  color: #365e4e;
  font-size: 24px;
}
.property-income small {
  font-size: 10px;
  color: #6e8067;
}
.property-actions {
  display: flex;
  gap: 8px;
}
.property-actions button {
  font-size: 11px;
}
.property-empty {
  padding: 24px;
  border: 1px dashed #bfcbb0;
  border-radius: 9px;
  line-height: 1.8;
  color: #607758;
}
.property-terms {
  padding: 20px;
  font-size: 12px;
  line-height: 1.8;
  margin-block: 20px;
}

.objective-garden {
  margin-bottom: 28px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f7efdc, #e8f0df 55%, #f4e6e7);
}
.objective-garden header p {
  max-width: 760px;
  line-height: 1.5;
}
.objective-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.objective-card {
  padding: 18px;
  border-radius: 18px;
  background: #fffdf5;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.objective-card h3,
.objective-card p {
  margin: 0;
}
.objective-card p {
  font-size: 13px;
  line-height: 1.5;
}
.objective-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.objective-card meter {
  display: block;
  width: 100%;
  height: 12px;
  accent-color: #719879;
}
.objective-rules {
  display: grid;
  gap: 5px;
  font-size: 12px;
  padding-left: 8px;
  border-left: 2px solid #d9e2ce;
}
.objective-earned {
  background: #edf5e4;
  border-color: #99b48b;
}
.lunch-service {
  padding: 22px;
  margin: 18px 0;
  background: #f5eddd;
  border-radius: 18px;
}
.lunch-service p {
  line-height: 1.6;
  max-width: 1000px;
}
.lunch-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}
.lunch-numbers strong {
  padding: 12px 16px;
  background: #fffaf0;
  border-radius: 12px;
}
.agent-relations {
  padding: 22px;
  border-radius: 18px;
  background: #f1f2e6;
  overflow-x: auto;
}
.agent-relations p {
  line-height: 1.6;
  max-width: 1050px;
}
.agent-relations table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.agent-relations th,
.agent-relations td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #d7decc;
}
.spinout-story {
  padding: 16px;
  background: #fff7e9;
  margin: 12px 0;
  border-radius: 14px;
}
.work-calendar {
  padding: 24px;
  margin: 22px 0;
  border-radius: 20px;
  background: linear-gradient(125deg, #f8eedb, #ebf0dd);
}
.work-calendar p,
.workforce-research li {
  line-height: 1.65;
  max-width: 1100px;
}
.work-calendar table {
  width: 100%;
  border-collapse: collapse;
}
.work-calendar th,
.work-calendar td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #d8decb;
}
.bonus-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
}
.bonus-controls select {
  max-width: 300px;
}
.workforce-research {
  margin-top: 18px;
}
.workforce-research li {
  margin: 12px 0;
}
.human-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.human-grid > details {
  align-self: start;
  padding: 14px;
}
.human-grid summary {
  cursor: pointer;
  font-weight: 650;
}
.human-grid article + article {
  border-top: 1px solid #d6ddcb;
  margin-top: 16px;
  padding-top: 8px;
}
.human-grid ol {
  padding-left: 20px;
}
.human-needs > p {
  max-width: 1100px;
}
.reputation-board {
  margin: 16px 0;
  padding: 24px;
}
.reputation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.reputation-grid > div {
  background: #f6f4e8;
  border: 1px solid #d8decf;
  border-radius: 14px;
  padding: 16px;
}
.reputation-grid strong {
  font-size: 28px;
  color: #486a58;
}
.reputation-grid h3 {
  font-size: 14px;
}
.reputation-grid progress {
  width: 100%;
  accent-color: #668e73;
}
.workplace-board > label {
  max-width: 650px;
}
.people-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}
.people-search input {
  width: 280px;
}
.pagination > span {
  align-self: center;
}

.office-policy {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(170px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px 0;
  border-top: 1px solid #657e6d25;
}
.office-policy label {
  display: grid;
  gap: 5px;
  font-size: 12px;
}
.office-policy small {
  grid-column: 1 / -1;
}

.office-week {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 7px;
  border: 1px solid #657e6d35;
  border-radius: 8px;
}
.office-week label {
  display: flex;
  align-items: center;
  gap: 3px;
}
.office-week legend {
  font-size: 12px;
}

/* Equipment cards inherit shared title/copy/body/action tracks from Runway UI. */
.store-grid {
  --rw-card-columns: 3;
  margin-block: 24px;
}
.store-grid .rw-card__title {
  display: grid;
  gap: 16px;
}
.store-grid .store-art {
  margin: 0;
}
.store-grid .rw-card__title h3 {
  margin: 0;
  font: 650 23px / 1.2 var(--rw-display-font);
}
.store-grid .rw-card__description {
  font-size: 13px;
  line-height: 1.65;
}
.store-grid .rw-card__body {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.store-grid .effect {
  margin: 0;
  font-size: 11px;
}
.store-grid .rw-input {
  inline-size: 100%;
}
.store-grid .store-price {
  inline-size: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--rw-line);
}