/* ==========================================================================
   STATE WARS — css/homebase.css
   The rebuilt home base: a field on the left, what you can build on the right.

   Deliberately plain. The buildings are the only thing worth looking at on
   this screen, so everything around them is dark, quiet and out of the way
   until there is a design to dress.
   ========================================================================== */

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

.hb__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(.6rem, 2vh, 1rem) var(--gutter);
  border-bottom: 1px solid rgba(127, 216, 255, .14);
}

.hb__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.hb__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  letter-spacing: .1em;
  color: #fff;
}

.hb__purse {
  margin-left: auto;
  display: grid;
  justify-items: end;
  gap: .1rem;
}

.hb__purse-label {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.hb__purse-value {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #ffd27a;
}

/* ONLY THE FIRST ONE IS PUSHED RIGHT. margin-left:auto on all three would put
   the whole width of the header between each of them; the group wants to
   travel right together and let the header's own gap separate them. */
.hb__purse ~ .hb__purse { margin-left: 0; }

/* Written here rather than in game.css because css/homebase.css loads after
   it, and .hb__purse-value would otherwise win on order and paint the food
   number gold along with the coins. */
.hb__purse-value.res--food  { color: #e9a884; }
.hb__purse-value.res--parts { color: #c3d0df; }

.hb__body {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 310px);
  gap: 0;
  flex: 1;
  min-height: 0;
}

.hb__field {
  position: relative;
  min-width: 0;
  min-height: 0;
  /* The canvas paints grass corner to corner now, so this is only what shows
     for the instant before the first frame lands. Green, not black, so there
     is never a dark flash on the way in. */
  background: #1b2a1a;
}

.hb__field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hb__hint {
  position: absolute;
  left: 50%;
  bottom: .8rem;
  transform: translateX(-50%);
  margin: 0;
  padding: .35rem .8rem;
  border-radius: 5px;
  background: rgba(8, 13, 22, .8);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: rgba(233, 241, 252, .7);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- the side panel ------------------------------------------------ */

.hb__panel {
  overflow-y: auto;
  padding: .8rem;
  border-left: 1px solid rgba(127, 216, 255, .14);
  background: rgba(7, 13, 26, .8);
}

/* The testing row. Deliberately unlike everything else on the screen — this is
   scaffolding, not a feature, and it should look like scaffolding so nobody
   mistakes it for part of the game. */
.hbdev {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
  padding: .4rem .45rem;
  border: 1px dashed rgba(255, 210, 122, .4);
  border-radius: 6px;
  background: rgba(38, 32, 16, .35);
}

.hbdev__label {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .2em;
  color: rgba(255, 210, 122, .75);
}

.hbdev__btn {
  padding: .25rem .5rem;
  font-size: .52rem;
  border-color: rgba(255, 210, 122, .4);
  color: #ffd27a;
  cursor: pointer;
}

.hbdev__btn:hover { border-color: #ffd27a; background: rgba(52, 44, 20, .8); }

.hb__label {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.hb__note {
  margin: .8rem 0 0;
  font-size: .68rem;
  line-height: 1.5;
  color: rgba(233, 241, 252, .45);
}

/* ---------- a building you can buy ---------------------------------------- */

.hbcard {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  margin-bottom: .45rem;
  padding: .45rem .55rem;
  border: 1px solid rgba(127, 216, 255, .2);
  border-radius: 7px;
  background: rgba(10, 18, 30, .75);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.hbcard:hover:not(:disabled) {
  border-color: rgba(255, 210, 122, .7);
  background: rgba(26, 24, 16, .85);
}

.hbcard.is-on {
  border-color: #ffd27a;
  background: rgba(38, 32, 16, .9);
}

.hbcard:disabled { opacity: .45; cursor: default; }

/* A span with a cropped background rather than an <img>, so an animated
   building shows ONE frame instead of its whole two-by-two sheet. */
.hbcard__art {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: block;
}

.hbcard__body { display: grid; gap: .1rem; min-width: 0; }

.hbcard__name {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .04em;
  color: #fff;
}

.hbcard__role {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.hbcard__foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .15rem;
}

.hbcard__cost {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--font-display);
  font-size: .82rem;
  color: #ffd27a;
}

.hbcard__go,
.hbcard__free {
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .16em;
  color: rgba(233, 241, 252, .6);
}

/* ---------- a building you have selected ---------------------------------- */

.hbdetail { display: grid; gap: .35rem; }

.hbdetail__art {
  display: block;
  width: 100%;
  height: 150px;
}

.hbdetail__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .05em;
  color: #fff;
}

.hbdetail__role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.hbdetail__desc,
.hbdetail__ability {
  margin: 0;
  font-size: .72rem;
  line-height: 1.5;
  color: rgba(233, 241, 252, .74);
}

.hbdetail__ability { color: #9fe3ae; }

/* ---------- the level block ----------------------------------------------- */

.hblevel {
  display: grid;
  gap: .35rem;
  margin-top: .5rem;
  padding: .55rem .6rem;
  border: 1px solid rgba(127, 216, 255, .18);
  border-radius: 7px;
  background: rgba(9, 16, 28, .7);
}

.hblevel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

.hblevel__label {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .2em;
  color: var(--c-dim);
}

.hblevel__value {
  font-family: var(--font-display);
  font-size: .95rem;
  color: #fff;
}

.hblevel__value i {
  font-style: normal;
  font-size: .74rem;
  color: rgba(233, 241, 252, .5);
}

/* The multiplier is the thing an upgrade actually buys, so it is the one
   number here that is coloured. */
.hblevel__value--gain { color: #9fe3ae; }
.hblevel__value--gain i { color: rgba(159, 227, 174, .75); }

/* TEN LITTLE MARKS, so the level is legible without reading the number —
   how far along you are is a shape, not a value. */
.hblevel__pips { display: flex; gap: 3px; }

.hblevel__pip {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
}

.hblevel__pip.is-on {
  background: #ffd27a;
  box-shadow: 0 0 calc(5px * var(--fx)) rgba(255, 194, 92, .6);
}

.hbdetail__up {
  width: 100%;
  border: 1px solid rgba(255, 210, 122, .5);
  background: rgba(38, 32, 16, .8);
  color: #ffd27a;
  cursor: pointer;
}

.hbdetail__up:hover:not(:disabled) { border-color: #ffd27a; background: rgba(52, 44, 20, .9); }
.hbdetail__up:disabled { opacity: .4; cursor: default; }
.hbdetail__up .coin { margin-right: .25em; }

.hbdetail__sell {
  margin-top: .5rem;
  width: 100%;
  border: 1px solid rgba(255, 122, 158, .55);
  background: rgba(52, 10, 24, .7);
  color: #ffbcd0;
  cursor: pointer;
}

@media (max-width: 780px) {
  .hb__body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .hb__panel { border-left: 0; border-top: 1px solid rgba(127, 216, 255, .14); max-height: 38vh; }
}

/* ---------- the way back out of a selected building ----------------------- */

.hb__crumb { margin-bottom: .5rem; }

.hb__back {
  padding: .3rem .6rem;
  font-size: .54rem;
  cursor: pointer;
}

.hb__back:hover { border-color: rgba(127, 216, 255, .7); color: #fff; }

/* ---------- an upgrade in progress ---------------------------------------- */

.hbwork { display: grid; gap: .3rem; }

.hbwork__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

.hbwork__label {
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .16em;
  color: #7fd8ff;
}

.hbwork__time {
  font-family: var(--font-display);
  font-size: .95rem;
  color: #fff;
  font-variant-numeric: tabular-nums;   /* so the digits do not jitter */
}

.hbwork__track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.hbwork__track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2470b8, #7fd8ff);
  box-shadow: 0 0 calc(9px * var(--fx)) rgba(127, 216, 255, .7);
  transition: width .5s linear;
}

/* ---------- what an upgrade actually buys --------------------------------- */

.hbwhat {
  display: grid;
  gap: .3rem;
  padding: .45rem .1rem .1rem;
  border-top: 1px solid rgba(127, 216, 255, .12);
}

.hbwhat__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .2em;
  color: var(--c-dim);
}

.hbwhat__lead {
  margin: 0;
  font-size: .7rem;
  line-height: 1.45;
  color: rgba(233, 241, 252, .8);
}

.hbwhat__note {
  margin: 0;
  font-size: .68rem;
  line-height: 1.5;
  color: rgba(233, 241, 252, .5);
}

.hbwhat__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .68rem;
  /* Figures line up column-wise so "13 → 15" and "121 → 133" read as the same
     comparison rather than as two unrelated pairs. */
  font-variant-numeric: tabular-nums;
}

.hbwhat__table th {
  text-align: left;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--c-dim);
  padding: .12rem 0;
}

.hbwhat__table td {
  text-align: right;
  padding: .12rem 0 .12rem .7rem;
  color: #fff;
  white-space: nowrap;
}

.hbwhat__gain { color: #9fe3ae; }

.hbwhat__foot {
  margin: .15rem 0 0;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .1em;
  color: rgba(233, 241, 252, .42);
}