/* ============================================================
   Tent renderer
   A camp of three FIXED-SIZE tents that rise out of the ground as
   the castle value climbs. The shell reuses the .image-container
   footprint (so it scales with the responsive gameplay castle
   sizing); each tent unit is a fixed clipping box sized/placed as
   a % of that shell, and its <img> slides up from translateY(100%)
   (hidden below its ground line) to translateY(0) (resting) — the
   peak emerges first and grows upward. The box is fixed, so
   revealing a later tent never shifts an earlier one.
   applyTentCastleValue() in main.js re-applies the translate on
   every value change; bands live on the units' data attributes.
   ============================================================ */

/* Inherit .image-container sizing — do NOT pin a fixed size here. */
.tent-castle-shell {
  position: relative;
}

.tent-castle-ground {
  position: absolute;
  inset: 0;
}

/* Each unit clips its tent; height is derived from the image's aspect ratio
   so the box is exactly tent-sized and the rise reveal clips cleanly. */
.tent-castle-unit {
  position: absolute;
  overflow: hidden;
  aspect-ratio: 640 / 427;
  pointer-events: none;
}

.tent-castle-unit img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

/* Front tent: largest, centred, sitting on the camp floor, in front. */
.tent-castle-unit-front {
  width: 76%;
  left: 12%;
  bottom: 0;
  z-index: 3;
}

/* Behind to the left: smaller, raised a little (further away), behind. */
.tent-castle-unit-left {
  width: 52%;
  left: -3%;
  bottom: 9%;
  z-index: 1;
}

/* To the right: smaller still, raised a little, behind the front. */
.tent-castle-unit-right {
  width: 48%;
  left: 55%;
  bottom: 12%;
  z-index: 2;
}

/* Value label sits just above the tent peaks rather than at the very top. */
.castle-image-hp.tent-castle-hp {
  bottom: auto;
  top: 34%;
  z-index: 6;
}

.tent-shield-glow,
.tent-shield-core {
  z-index: 6;
}

/* ── Wooden palisade (wall) — rises from the ground IN FRONT of the tents ──
   Same rise mechanism as a tent: a fixed clipping box at the ground whose <img>
   slides up from translateY(100%) to 0 as the wall value climbs. z-index 4 puts
   it in front of the tents (z 1–3). */
.tent-wall-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
}

.tent-wall-unit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  pointer-events: none;
}

.tent-wall-unit img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

.wall-image-hp.tent-wall-hp {
  bottom: 8px;
  z-index: 6;
}

/* ============================================================
   Tent renderer test harness
   Reuses the .castle-renderer-harness-* page chrome, adds the
   value slider + per-tent tuning panels.
   ============================================================ */

.tent-renderer-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tent-renderer-value-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(17, 12, 8, 0.55);
}

.tent-renderer-value-label {
  font-weight: 600;
  white-space: nowrap;
}

.tent-renderer-value-label strong {
  display: inline-block;
  min-width: 2.5ch;
  text-align: right;
  color: #d4a017;
}

#tent-renderer-value {
  flex: 1;
  cursor: pointer;
}

.tent-renderer-tent-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.tent-renderer-tent-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  width: 240px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(17, 12, 8, 0.55);
}

.tent-renderer-tent-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 100%;
  font-weight: 700;
}

.tent-renderer-progress {
  font-weight: 600;
  opacity: 0.85;
  color: #06a77d;
}

/* Fixed-width progress number so the panel width never changes as the value
   updates — otherwise the panels reflow into a second row and shove the
   castle board down (the "jump"). */
.tent-renderer-progress > span {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
}

.tent-renderer-tent-panel .castle-renderer-harness-field input {
  width: 92px;
}

.tent-renderer-board {
  justify-content: center;
  align-items: flex-end;
}

/* The shared .castle-renderer-harness-board scales its castle up 2.7x (to make
   the tiny 128px classic castle visible). The tent shell is already pinned to a
   real size below, so cancel that zoom here — otherwise the camp balloons to
   ~800px and covers the controls/slider. */
.tent-renderer-board .castle-visual-group {
  transform: none;
}

/* The harness castle area is unconstrained, so the flex .image-container
   (flex: 4 1 0 at some breakpoints) would stretch to fill it. In real gameplay
   the parent constrains the castle; here we pin it to a representative gameplay
   footprint so the camp looks right. (Specificity beats the media-query
   .image-container rules.) */
.tent-renderer-board .tent-castle-shell {
  flex: 0 0 auto;
  width: 300px;
  height: 282px;
}