/* ==========================================================================
   The Burning Fire — framework
   Layout, tabs, buttons, tooltips, notifications, events, menu.
   Loaded after theme.css; reads its tokens and never hard-codes a colour.
   ========================================================================== */

/* ==========================================================================
   Shell
   ========================================================================== */

div.clear { clear: both; }

div#wrapper {
	margin: auto;
	width: var(--panel-w);
	padding: 28px 0 0 calc(var(--rail-w) + var(--rail-gap));
	position: relative;
}

div#content {
	position: relative;
	overflow: hidden;
	height: var(--panel-h);
}

div#header {
	padding-bottom: 22px;
	min-height: 26px;
}

div#outerSlider  { position: absolute; }

div#outerSlider > div {
	position: relative;
	float: left;
	width: var(--panel-w);
	height: var(--panel-h);
	overflow: hidden;
}

div#locationSlider { position: absolute; }

div.location {
	position: relative;
	float: left;
	width: var(--panel-w);
}

/* ---- The save flash ---------------------------------------------------- */

div#saveNotify {
	position: absolute;
	top: 28px;
	right: 0;
	padding: 2px 9px;
	background: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink-dim);
	font-size: var(--fs-micro);
	font-style: italic;
	letter-spacing: 0.04em;
	opacity: 0;
	pointer-events: none;
	z-index: 40;
}

/* An extra dot marks a save that only reached the browser, not the server. */
div#saveNotify.local:after {
	content: " ·";
	color: var(--gold);
}

/* ==========================================================================
   Key / value rows
   ========================================================================== */

div.row_key {
	clear: both;
	float: left;
	color: var(--ink-dim);
}

div.row_val {
	float: right;
	color: var(--ink);
}

div.total {
	font-weight: bold;
	color: var(--ink-strong);
}

div.total .row_key { color: var(--ink); }

/* ==========================================================================
   Location tabs
   ========================================================================== */

/* The header is a flex row so the tabs share a baseline no matter how the
   labels wrap, and so the phone layout can turn it into a scrolling bar. */
div#header {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

div.headerButton {
	position: relative;
	font-size: var(--fs-tab);
	line-height: 1.35;
	cursor: pointer;
	padding: 1px 2px 6px;
	color: var(--ink-faint);
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: color 0.18s ease;
}

/* No dividing rules between the tabs. A 1px bar can only be aligned to one
   set of text metrics, and it looked wrong against every other — the ember
   underline already says which room you are in, and the dimmed colour says
   which ones you are not. Spacing does the rest. */

div.headerButton:after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 0;
	height: 2px;
	background: var(--ember);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
	div.headerButton:hover { color: var(--ink); text-decoration: none; }
	div.headerButton:hover:after { transform: scaleX(1); opacity: 0.45; }
}

div.headerButton.selected,
div.headerButton.selected:hover {
	cursor: default;
	color: var(--ink-strong);
	text-decoration: none;
}

div.headerButton.selected:after { transform: scaleX(1); opacity: 1; }

/* ==========================================================================
   Notifications rail
   ========================================================================== */

div#notifications {
	position: absolute;
	top: 28px;
	left: 0;
	height: var(--panel-h);
	width: var(--rail-w);
	overflow: hidden;
	color: var(--ink-faint);
	font-size: var(--fs-small);
	line-height: 1.5;
	/* Messages are prepended, so the newest sits at the top and the older
	   ones sink away into the dark rather than being cut off. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
}

div#notifications div.notification {
	margin-bottom: 11px;
	padding-left: 11px;
	position: relative;
	color: var(--ink-faint);
}

div#notifications div.notification:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ink-ghost);
}

/* The most recent line reads brightest and carries an ember tick. */
div#notifications div.notification:first-child {
	color: var(--ink);
}

div#notifications div.notification:first-child:before {
	background: var(--ember);
	box-shadow: 0 0 7px var(--ember-edge);
}

/* Kept for the engine's fade behaviour; the mask does the real work now. */
div#notifyGradient {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: none;
	pointer-events: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

div.button {
	position: relative;
	text-align: center;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--bg-lift);
	color: var(--ink);
	width: 100px;
	margin-bottom: 6px;
	padding: 6px 10px;
	box-sizing: content-box;
	cursor: pointer;
	/* Tight leading and no min-height, deliberately. A pointer does not
	   need a 44px target, and the craft column runs fourteen buttons deep —
	   loosen either and the bottom of the list falls off the 700px board.
	   mobile.css raises the padding and the minimum back up for touch. */
	line-height: 1.25;
	/* Emphatically not overflow: hidden. Every button's cost panel is a
	   child positioned outside the button's own box, so clipping the
	   button hides every price in the game. The cooldown sweep is already
	   bounded by the button's width. */
	transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Pointer only: on touch this would stick after a tap. */
@media (hover: hover) and (pointer: fine) {
	div.button:hover {
		text-decoration: none;
		border-color: var(--ember);
		color: var(--ink-strong);
		background: var(--bg-raised);
		box-shadow: var(--glow-ember);
	}
}

div.button:active {
	transform: translateY(1px);
	background: var(--bg-inset);
}

div.button.disabled {
	cursor: default;
	border-color: var(--line-soft);
	color: var(--ink-ghost);
	background: transparent;
	box-shadow: none;
	transform: none;
	text-decoration: none;
}

/* The cooldown sweep: a bar of coals burning back down to nothing. */
div.button div.cooldown {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 100%;
	background-image: linear-gradient(
		90deg,
		var(--ember-coal) 0%,
		var(--ember-deep) 62%,
		var(--ember) 100%
	);
	opacity: 0.30;
	pointer-events: none;
}

div.button.disabled div.cooldown { opacity: 0.20; }

/* Keep the label above the sweep. */
div.button > * { position: relative; z-index: 1; }
div.button div.cooldown { z-index: 0; }

/* A button whose cost you cannot meet gets a warmer warning edge. */
div.button.free { border-style: solid; }

/* ==========================================================================
   Up / down steppers
   ========================================================================== */

.upBtn, .dnBtn, .upManyBtn, .dnManyBtn {
	position: absolute;
	width: 16px;
	height: 13px;
	cursor: pointer;
}

.upBtn, .dnBtn         { right: 0; }
.upManyBtn, .dnManyBtn { right: -16px; }

.upBtn.disabled, .dnBtn.disabled,
.upManyBtn.disabled, .dnManyBtn.disabled { cursor: default; }

.upBtn, .upManyBtn { top: -3px; }
.dnBtn, .dnManyBtn { bottom: -3px; }

.upBtn:after, .upBtn:before,
.upManyBtn:after, .upManyBtn:before {
	position: absolute;
	border: medium solid transparent;
	content: " ";
	height: 0;
	width: 0;
	bottom: 2px;
}

.dnBtn:after, .dnBtn:before,
.dnManyBtn:after, .dnManyBtn:before {
	position: absolute;
	border: medium solid transparent;
	content: " ";
	height: 0;
	width: 0;
	top: 2px;
}

/* Outer triangle: the visible arrow. */
.upBtn:before, .dnBtn:before,
.upManyBtn:before, .dnManyBtn:before {
	border-width: 6px;
	left: 50%;
	margin-left: -6px;
}

/* Inner triangle punched out in the panel colour, leaving a chevron. */
.upBtn:after, .dnBtn:after {
	border-width: 4px;
	left: 50%;
	margin-left: -4px;
}

.upManyBtn:after, .dnManyBtn:after {
	border-width: 3px;
	left: 50%;
	margin-left: -3px;
}

/* Solid triangles. The original punched a smaller triangle out of each one
   in the page colour to leave a chevron, which only works while the button
   sits on a known background — and these appear both on the page and inside
   framed panels. A solid arrow reads at least as clearly and is immune. */
.upBtn:before, .upManyBtn:before { border-color: transparent transparent var(--ink-dim); }
.dnBtn:before, .dnManyBtn:before { border-color: var(--ink-dim) transparent transparent; }

.upBtn:after, .dnBtn:after,
.upManyBtn:after, .dnManyBtn:after { border-color: transparent; }

.upBtn:hover:before, .upManyBtn:hover:before { border-color: transparent transparent var(--ember); }
.dnBtn:hover:before, .dnManyBtn:hover:before { border-color: var(--ember) transparent transparent; }

.upBtn.disabled:before, .upManyBtn.disabled:before,
.upBtn.disabled:hover:before, .upManyBtn.disabled:hover:before {
	border-color: transparent transparent var(--ink-ghost);
}

.dnBtn.disabled:before, .dnManyBtn.disabled:before,
.dnBtn.disabled:hover:before, .dnManyBtn.disabled:hover:before {
	border-color: var(--ink-ghost) transparent transparent;
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

div.tooltip {
	display: none;
	padding: 6px 9px;
	border: 1px solid var(--line-strong);
	border-top-color: var(--ember-edge);
	border-radius: var(--radius);
	position: absolute;
	box-shadow: var(--shadow-tip);
	background: var(--bg-raised);
	color: var(--ink);
	font-family: var(--font-prose);
	font-size: var(--fs-micro);
	line-height: 1.5;
	z-index: 999;
	text-align: left;
}

div.tooltip .row_key { color: var(--ink-dim); }
div.tooltip .row_val { color: var(--ink); }

.tooltip.bottom { top: 34px; }
.tooltip.right  { left: 2px; }
.tooltip.left   { right: 0; }
.tooltip.top    { bottom: 24px; }

div.button div.tooltip { width: 100px; }

/**
 * Hover-to-reveal, for pointing devices only.
 *
 * A touch device has no hover, but it does have *sticky* hover: tapping a
 * button leaves it matching :hover until you tap something else. Ungated,
 * that left every build button's cost panel hanging open inside the button
 * itself — the "box inside a box". Touch gets long-press instead, which
 * script/mobile.js implements by toggling .tip-open.
 */
@media (hover: hover) and (pointer: fine) {
	*:hover > div.tooltip { display: block; }
	div.tooltip:hover     { display: none !important; }

	.disabled:hover > div.tooltip,
	.button.free:hover > div.tooltip { display: none; }

	#event .button.disabled:hover > div.tooltip { display: block; }
}

/* Long-press on touch, and the one rule that beats every :hover above. */
.tip-open > div.tooltip { display: block !important; }

/* ==========================================================================
   Events
   ========================================================================== */

.eventPanel {
	background: var(--bg-panel);
	border: 1px solid var(--line-strong);
	border-top: 1px solid var(--ember-edge);
	border-radius: var(--radius);
	box-shadow: var(--shadow-panel);
	left: 250px;
	padding: 26px 28px 22px;
	position: absolute;
	top: 90px;
	width: 335px;
	z-index: 20;
}

/* The veil that dims the room behind an event. */
.eventPanel:before {
	background: var(--dim-veil);
	content: " ";
	position: fixed;
	inset: 0;
	width: auto;
	height: auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);
}

/* The engine's old double-border trick is no longer needed. */
.eventPanel:after { content: none; }

.eventPanel .button {
	float: left;
	margin-right: 18px;
}

.eventTitle {
	display: inline-block;
	font-weight: bold;
	position: absolute;
	top: -0.72em;
	left: 26px;
	padding: 0 10px;
	background: var(--bg-panel);
	color: var(--ember-bright);
	font-size: var(--fs-small);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.eventTitle:after { content: none; }

#description {
	position: relative;
	min-height: 100px;
	color: var(--ink);
}

#description > div { padding-bottom: 18px; }

#description textarea {
	width: 100%;
	height: 225px;
	box-sizing: border-box;
	background: var(--bg-inset);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	line-height: 1.45;
	padding: 8px;
	resize: vertical;
}

.take-all-button { float: none; }

#buttons > .button { margin: 0 15px 7px 0; }

/* ---- Combat ------------------------------------------------------------ */

/* The two fighters are absolutely positioned against #description, so their
   container collapses to nothing and they land on top of the narration.
   Reserving height here is what keeps the hp readouts clear of the text. */
#fight {
	height: 70px;
	padding-bottom: 0 !important;
}

#description div.fighter {
	padding: 0;
	position: absolute;
	bottom: 15px;
	font-family: var(--font-mono);
	font-size: 20px;
	color: var(--ink-strong);
}

#wanderer { left: 25%; }
#enemy    { right: 25%; color: var(--blood); }

.hp {
	position: absolute;
	top: -18px;
	margin-left: -50%;
	color: var(--ink-dim);
	font-size: var(--fs-micro);
	letter-spacing: 0.08em;
}

#description .bullet {
	padding: 0 20px;
	bottom: 25px;
	position: absolute;
	height: 1px;
	line-height: 1px;
	color: var(--ember-hot);
	font-family: var(--font-mono);
}

.damageText {
	position: absolute;
	bottom: 15px;
	left: 50%;
	margin-left: -50%;
	color: var(--blood);
	font-weight: bold;
}

#wanderer .damageText { color: var(--blood); }
#enemy .damageText    { color: var(--ember-hot); }

#lootButtons {
	padding-bottom: 0 !important;
	margin: 26px 0 5px;
	position: relative;
}

#lootButtons:before {
	content: attr(data-legend);
	position: absolute;
	top: -22px;
	left: 0;
}

/* ==========================================================================
   Menu (bottom right)
   ========================================================================== */

.menu {
	position: fixed;
	right: 14px;
	bottom: 12px;
	color: var(--ink-faint);
	font-size: var(--fs-micro);
	letter-spacing: 0.045em;
	z-index: 30;
	max-width: calc(100vw - 28px);
	text-align: right;
}

.menu span {
	cursor: pointer;
	float: right;
	margin-left: 18px;
	transition: color 0.15s ease;
}

.menu span:hover {
	color: var(--ember);
	text-decoration: none;
}

.menu .appStore { font-weight: normal; }

.menu .bossLink { color: var(--ink-ghost); }
.menu .bossLink:hover { color: var(--gold); }
.menu .bossLink.active { color: var(--gold); }

/* The byline is text, not a control. */
.menu .byline {
	cursor: default;
	color: var(--ink-ghost);
}

.menu .byline:hover { color: var(--ink-ghost); }

/* script/space.js recolours this during the ascent. */
select.menuBtn {
	font-family: var(--font-prose);
	font-size: var(--fs-micro);
	background: var(--bg-lift);
	color: var(--ink-dim);
	border: 1px solid var(--line);
}

/* ==========================================================================
   Drop menu (stores context menu)
   ========================================================================== */

#dropMenu {
	background: var(--bg-raised);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	position: absolute;
	z-index: 100;
	padding-top: 6px;
	text-align: left;
	box-shadow: var(--shadow-tip);
	cursor: default;
	font-size: var(--fs-small);
}

#dropMenu:before {
	content: attr(data-legend);
	border-bottom: 1px solid var(--line);
	display: block;
	margin-bottom: 5px;
	padding: 0 8px 5px;
}

#dropMenu > div {
	padding: 4px 8px;
	cursor: pointer;
	color: var(--ink-dim);
}

#dropMenu > div:hover {
	color: var(--ember);
	background: var(--ember-wash);
	text-decoration: none;
}

/* ==========================================================================
   Install prompt (PWA)
   ========================================================================== */

#tbfInstall {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: none;
	align-items: center;
	gap: 14px;
	max-width: min(460px, calc(100vw - 28px));
	padding: 11px 14px;
	background: var(--bg-raised);
	border: 1px solid var(--line-strong);
	border-top-color: var(--ember-edge);
	border-radius: 4px;
	box-shadow: var(--shadow-panel);
	font-size: var(--fs-small);
	color: var(--ink);
	z-index: 60;
}

#tbfInstall.show { display: flex; }

/* The mark is taller than it is wide; drive it from the height so the
   aspect ratio stays whatever img/mark.svg says it is. */
#tbfInstall .mark {
	height: 34px;
	width: auto;
	flex: 0 0 auto;
}

#tbfInstall p { margin: 0; flex: 1 1 auto; }

#tbfInstall button {
	font-family: var(--font-prose);
	font-size: var(--fs-micro);
	letter-spacing: 0.05em;
	padding: 5px 11px;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	min-height: 30px;
}

#tbfInstall button.go { border-color: var(--ember); color: var(--ember-bright); }
#tbfInstall button:hover { background: var(--ember-wash); }

/* ==========================================================================
   Offline banner
   ========================================================================== */

#tbfOffline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 5px 12px;
	background: var(--ember-coal);
	color: var(--ember-hot);
	font-size: var(--fs-micro);
	letter-spacing: 0.05em;
	text-align: center;
	z-index: 70;
	transform: translateY(-100%);
	transition: transform 0.25s ease;
}

#tbfOffline.show { transform: translateY(0); }