/* ==========================================================================
   The Burning Fire — the barren world
   The ASCII map, the pack, and the supplies rail.
   ========================================================================== */

#worldOuter {
	position: relative;
	display: inline-block;

	/* The gap above the pack frame lives here as padding, not as a margin
	   on the frame itself. A top margin on the first child collapses out
	   of a plain block container, which on the phone layout put the frame
	   flush with #worldOuter's top and dropped the three notched labels
	   inside it, on top of the supply chips. Padding cannot collapse. */
	--pack-gap: 20px;
	padding-top: var(--pack-gap);
}

#map {
	position: relative;
	font-family: var(--font-mono);
	font-size: 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-inset);
	overflow: hidden;
	display: inline-block;
	padding: 6px 7px;
	line-height: 10px;
	letter-spacing: 1px;
	color: var(--map-ink);
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Explored ground is a faint scratch; only what matters carries colour. */
#map .landmark {
	position: relative;
	font-weight: bold;
	color: var(--ember);
	/* Keeps the bold glyph from stretching the row. */
	line-height: 0;
}

#map .village {
	position: relative;
	font-weight: bold;
	color: var(--gold);
	line-height: 0;
	text-shadow: 0 0 6px rgba(224, 178, 100, 0.5);
}

/* You. The one hot point on a cold map. */
#map .wanderer {
	position: relative;
	font-weight: bold;
	color: var(--ember-hot);
	line-height: 0;
	text-shadow: 0 0 8px var(--ember), 0 0 16px var(--ember-edge);
}

@media (prefers-reduced-motion: no-preference) {
	#map .wanderer { animation: tbf-pulse 2.4s ease-in-out infinite; }
}

@keyframes tbf-pulse {
	0%, 100% { text-shadow: 0 0 6px var(--ember), 0 0 14px var(--ember-edge); }
	50%      { text-shadow: 0 0 11px var(--ember-bright), 0 0 24px var(--ember-edge); }
}

/* ---- The pack ---------------------------------------------------------- */

#bagspace-world {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-panel);
	min-height: 62px;
	margin: 0 0 6px;
	overflow: hidden;
	box-sizing: border-box;
}

/* Room at the top for the notched labels to sit clear of the chips. */
#bagspace-world > div { padding: 15px 7px 4px; }

/* The three labels are notched into #bagspace-world's top border, which is
   exactly --pack-gap below #worldOuter's top. Half a line height up from
   there centres each label on the border, whatever the gap is set to. */
#backpackTitle,
#backpackSpace,
#healthCounter {
	position: absolute;
	top: calc(var(--pack-gap) - 0.7em);
	padding: 0 7px;
	background: var(--bg);
	z-index: 1;
	font-size: var(--fs-micro);
	line-height: 1.4;
}

#backpackTitle {
	left: 10px;
	color: var(--ink-dim);
	font-family: var(--font-prose);
	font-style: italic;
	letter-spacing: 0.06em;
}

#backpackSpace {
	right: 10px;
	color: var(--ink-dim);
}

#healthCounter {
	left: 92px;
	color: var(--blood);
}

div.supplyItem {
	display: inline-block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-lift);
	color: var(--ink-dim);
	float: left;
	margin: 0 6px 6px 0;
	padding: 1px 7px;
	font-size: var(--fs-micro);
	cursor: default;
}

div#supply_water        { color: var(--water); border-color: rgba(111, 151, 168, 0.35); }
div#supply_cured\ meat  { color: var(--growth); }