/* ============================================================================
   Home
   ----------------------------------------------------------------------------
   A courtyard with places in it, not a list of buttons over a photograph.
   The squad stands about and breathes, the destinations are markers planted
   in the scene, and the idle chest fills where you can see it filling.

   Depends on tokens.css and kit.css.
   ========================================================================== */

.hb { display: grid; grid-template-rows: 1fr auto; min-height: 100%; }

.hb-scene {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center 36%;
  box-shadow: inset 0 -90px 80px -30px rgba(5, 7, 13, 0.9);
  overflow: hidden;
}

/* --- destinations ------------------------------------------------------------
   A medallion planted on the scene, with its name on a plate beneath. Hover
   and press lift it, so it reads as a thing standing there rather than an
   overlay. */

.hb-place {
  position: absolute;
  /* Above the squad. The figures are scene dressing; a signpost the player
     is meant to tap must never end up behind one of them. */
  z-index: 12;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  min-width: var(--tap);
  min-height: var(--tap);
  transition: transform var(--t-quick) var(--ease-out);
}
.hb-place:hover { transform: translateY(-3px); }
.hb-place:active { transform: translateY(2px); }

/* A hexagonal medallion with the mark inside, on a plaque that names it.
   Signposts planted in the courtyard, which is how the reference reads. */
/* Bigger. These are the five destinations the hub exists to offer, and
   at 54px they read as decoration on a painted courtyard rather than as
   the controls they are — the scene is the biggest thing on the screen
   and they were competing with it at a quarter of its scale. */
.hb-place-mark {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background:
    linear-gradient(180deg, var(--gold-200), var(--gold-500) 56%, var(--gold-800));
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}
.hb-place-mark .gi {
  /* Inset so the gold reads as a frame around the mark. */
  width: 55px;
  height: 55px;
  clip-path: polygon(50% 3%, 96% 28%, 96% 72%, 50% 97%, 4% 72%, 4% 28%);
  background: radial-gradient(70% 70% at 40% 26%, #39405c, #10141f);
  padding: 4px;
  box-sizing: border-box;
}

.hb-place-label {
  margin-top: -6px;
  padding: 3px 12px;
  border-radius: var(--rad-sm);
  border: 1px solid rgba(240, 192, 112, 0.42);
  background: linear-gradient(180deg, rgba(16, 20, 32, 0.95), rgba(8, 10, 16, 0.95));
  font-family: var(--font-display);
  font-size: var(--fz-small);
  color: var(--gold-200);
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.hb-place .kit-badge { position: absolute; top: -4px; right: -2px; }

/* --- the squad ---------------------------------------------------------------- */

.hb-figure {
  position: absolute;
  bottom: 6%;
  translate: -50% 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hb-figure img {
  /* The squad is what the player built; it should be the thing the eye
     lands on after the architecture, not a row of thumbnails along the
     bottom of it. */
  height: calc(168px * var(--s));
  width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.7)) brightness(calc(0.72 + var(--s) * 0.3));
  animation-delay: var(--d);
}

/* --- the idle chest -------------------------------------------------------------
   Planted in the corner of the courtyard, filling as income banks. The glow
   only starts once there is something in it, so the screen is not shouting
   at a player who collected a minute ago. */

.hb-chest {
  position: absolute;
  /* Above the line of figures rather than among them — it is a thing to
     collect, not a sixth member of the squad. */
  right: var(--s3);
  bottom: 20%;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hb-chest-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(70% 70% at 40% 30%, rgba(60, 48, 24, 0.9), rgba(16, 14, 10, 0.9));
  box-shadow: var(--bevel), var(--shelf-sm) #2a1f0c, var(--cast-sm);
  filter: grayscale(0.6) brightness(0.72);
  transition: filter var(--t-base) var(--ease-out);
}

/* How full it is, read as a rising level behind the chest. */
.hb-chest-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.hb-chest-fill > i {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  background: linear-gradient(180deg, rgba(255, 206, 120, 0.45), rgba(255, 170, 60, 0.18));
  transition: height var(--t-base) var(--ease-out);
}

.hb-chest.is-ready .hb-chest-art {
  filter: none;
  box-shadow: var(--bevel), var(--shelf-sm) #2a1f0c, 0 0 20px rgba(255, 190, 90, 0.55), var(--cast-sm);
  animation: hb-chest-glow 2.4s ease-in-out infinite;
}
@keyframes hb-chest-glow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.hb-chest.is-full .hb-chest-art { animation-duration: 1.2s; }

.hb-chest-tag {
  padding: 2px 10px;
  border: 1px solid rgba(240, 192, 112, 0.4);
  font-family: var(--font-num);
  border-radius: var(--rad-pill);
  font-size: var(--fz-tiny);
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(6, 8, 14, 0.82);
}
.hb-chest.is-ready .hb-chest-tag { color: var(--text-ink); background: var(--gold-300); }

/* --- the dock -------------------------------------------------------------------- */

.hb-dock {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(8, 11, 18, 0.98) 55%, transparent);
}

.hb-xp { display: grid; gap: 4px; }
.hb-xp-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fz-small);
  color: var(--text-dim);
}
.hb-xp-track {
  height: 7px;
  border-radius: var(--rad-pill);
  background: var(--panel-sunken);
  box-shadow: var(--carve);
  overflow: hidden;
}
.hb-xp-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #9fd0ff, #2f6fc0);
}

/* --- the action --------------------------------------------------------------- */

.hb-go { display: flex; gap: var(--s2); align-items: stretch; }

.hb-fight {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--s2);
  min-height: 62px;
  padding: 0 6px 0 var(--s4);
  border: 3px solid var(--gold-800);
  border-radius: var(--rad-md);
  background: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-300) 46%, var(--gold-400) 100%);
  color: var(--text-ink);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--bevel-strong), var(--shelf-lg) var(--gold-800), var(--cast-md);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.hb-fight:active {
  transform: translateY(4px);
  box-shadow: var(--bevel-strong), var(--shelf-sm) var(--gold-800), var(--cast-sm);
}

.hb-fight-word {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* The level it leads to, shown rather than spelled out. */
.hb-fight-chip {
  position: relative;
  display: grid;
  place-items: end center;
  width: 74px;
  height: 50px;
  flex: none;
  border-radius: var(--rad-sm);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(107, 69, 18, 0.7), var(--carve);
}
.hb-fight-chip-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hb-fight-chip-id {
  position: relative;
  width: 100%;
  padding: 1px 0;
  text-align: center;
  font-size: var(--fz-tiny);
  color: #fff;
  background: rgba(6, 8, 14, 0.8);
}

/* Shine sweep, same cadence as the kit's primary tier. */
.hb-fight::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -40%;
  width: 22%;
  height: 220%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-140%) rotate(16deg);
  animation: kit-shine var(--t-idle) var(--ease-out) infinite;
}

.hb-stages {
  display: grid;
  place-items: center;
  gap: 1px;
  width: 74px;
  flex: none;
  padding: 0;
  border: 3px solid #202a5c;
  border-radius: var(--rad-md);
  background: linear-gradient(180deg, #6b7fd6 0%, #4356a8 48%, #2e3b78 100%);
  color: #f1f4ff;
  font-family: var(--font-display);
  font-size: var(--fz-tiny);
  cursor: pointer;
  box-shadow: var(--bevel), var(--shelf-lg) #1b2250, var(--cast-sm);
}
.hb-stages:active { transform: translateY(4px); box-shadow: var(--bevel), var(--shelf-sm) #1b2250; }

@media (prefers-reduced-motion: reduce) {
  .hb-chest.is-ready .hb-chest-art { animation: none; }
}