/* ==========================================================================
   The Burning Fire — design tokens, ground and typography
   --------------------------------------------------------------------------
   Two themes live here. Ember (dark, warm, the default — you are sitting by
   a fire) and Ashlight (a pale, cold daylight variant for reading in the sun).
   Everything downstream reads these variables and never hard-codes a colour.
   ========================================================================== */

:root {
	/* ---- Ember: the default ---------------------------------------- */

	/* grounds */
	--bg:            #0d0a09;
	--bg-lift:       #14100d;
	--bg-panel:      #17120f;
	--bg-raised:     #1e1712;
	--bg-inset:      #0a0807;

	/* ink */
	--ink:           #ece1d4;
	--ink-strong:    #fff8ee;
	--ink-dim:       #9d8f81;
	--ink-faint:     #6b5f55;
	--ink-ghost:     #453c35;

	/* structure */
	--line:          #33281f;
	--line-soft:     #241c16;
	--line-strong:   #4e3d2e;

	/* fire */
	--ember:         #ff8a3d;
	--ember-bright:  #ffb066;
	--ember-hot:     #ffe3a8;
	--ember-deep:    #b8461f;
	--ember-coal:    #6e1810;
	--ember-wash:    rgba(255, 138, 61, 0.13);
	--ember-edge:    rgba(255, 138, 61, 0.42);

	/* meaning */
	--gold:          #e0b264;
	--blood:         #cf5344;
	--water:         #6f97a8;
	--growth:        #8ba36b;

	/* Explored terrain on the world map. It needs its own value: the glyphs
	   are 11px monospace, so anything as quiet as --ink-ghost disappears. */
	--map-ink:       #7c6f62;

	/* effects */
	--shadow-panel:  0 18px 44px rgba(0, 0, 0, 0.62), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
	--shadow-tip:    0 10px 26px rgba(0, 0, 0, 0.66);
	--glow-ember:    0 0 22px rgba(255, 138, 61, 0.22);
	--dim-veil:      rgba(8, 6, 5, 0.74);

	/* type */
	--font-prose: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
	--font-mono:  ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

	--fs-body:   16px;
	--fs-small:  14px;
	--fs-micro:  12.5px;
	--fs-tab:    17px;
	--lh-prose:  1.62;

	/* Metrics. The board is 700px wide, as the engine has always assumed,
	   but a little taller than the original 700 — the craft column runs to
	   fourteen buttons and a translated label that wraps to two lines would
	   otherwise fall off the bottom. script/mobile.js keeps these in step
	   with Engine.BASE_PANEL_W / H. */
	--panel-w:   700px;
	--panel-h:   760px;
	--rail-w:    200px;
	--rail-gap:  20px;
	--radius:    2px;
	--tap:       34px;

	/* fire intensity, 0 at a dead fire through 1 at a roaring one.
	   Set from script/mobile.js as the fire changes. */
	--fire:      0;

	color-scheme: dark;
}

/* ---- Ashlight: the daylight theme -------------------------------------- */

body.lights-on {
	--bg:            #e9e0d1;
	--bg-lift:       #f1e9dc;
	--bg-panel:      #f7f1e6;
	--bg-raised:     #fdf9f1;
	--bg-inset:      #ddd2bf;

	--ink:           #241b13;
	--ink-strong:    #0f0a06;
	--ink-dim:       #5c4f42;
	--ink-faint:     #8a7a68;
	--ink-ghost:     #b3a693;

	--line:          #c3b39c;
	--line-soft:     #d6c9b5;
	--line-strong:   #917d63;

	--ember:         #c2410c;
	--ember-bright:  #e2620f;
	--ember-hot:     #a13a08;
	--ember-deep:    #8c2f08;
	--ember-coal:    #5c1d05;
	--ember-wash:    rgba(194, 65, 12, 0.10);
	--ember-edge:    rgba(194, 65, 12, 0.38);

	--gold:          #8d6510;
	--blood:         #a8291c;
	--water:         #3c6577;
	--growth:        #4f6a33;

	--map-ink:       #8c7d6b;

	--shadow-panel:  0 16px 38px rgba(60, 42, 24, 0.22);
	--shadow-tip:    0 8px 20px rgba(60, 42, 24, 0.24);
	--glow-ember:    0 0 18px rgba(194, 65, 12, 0.14);
	--dim-veil:      rgba(233, 224, 209, 0.78);

	color-scheme: light;
}

/* ==========================================================================
   Ground
   ========================================================================== */

html {
	height: 100%;
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100%;
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-prose);
	font-size: var(--fs-body);
	line-height: var(--lh-prose);
	font-weight: normal;
	letter-spacing: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

/* Firelight. Two fixed layers behind everything: a broad warm pool rising
   from the bottom of the screen, and a tighter core that breathes.
   Both scale with --fire, so a dead fire leaves the room genuinely dark. */
body::before,
body::after {
	content: "";
	position: fixed;
	left: 50%;
	bottom: -32vmin;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
}

body::before {
	width: 190vmax;
	height: 130vmin;
	background: radial-gradient(
		ellipse at 50% 100%,
		rgba(255, 138, 61, 0.20) 0%,
		rgba(184, 70, 31, 0.13) 26%,
		rgba(110, 24, 16, 0.07) 48%,
		rgba(0, 0, 0, 0) 72%
	);
	opacity: calc(0.16 + var(--fire) * 0.84);
}

body::after {
	width: 92vmin;
	height: 74vmin;
	background: radial-gradient(
		ellipse at 50% 100%,
		rgba(255, 214, 150, 0.16) 0%,
		rgba(255, 138, 61, 0.10) 34%,
		rgba(0, 0, 0, 0) 70%
	);
	opacity: calc(var(--fire) * 0.9);
	animation: tbf-breathe 7.5s ease-in-out infinite;
}

body.lights-on::before { opacity: calc(0.05 + var(--fire) * 0.30); }
body.lights-on::after  { opacity: calc(var(--fire) * 0.24); }

@keyframes tbf-breathe {
	0%, 100% { transform: translateX(-50%) scale(1);      }
	38%      { transform: translateX(-50%) scale(1.055);  }
	64%      { transform: translateX(-50%) scale(0.975);  }
}

@media (prefers-reduced-motion: reduce) {
	body::after { animation: none; }
}

/* The space ascent paints the body itself; kill the firelight then. */
body.in-space::before,
body.in-space::after { opacity: 0 !important; }

/* Everything the player sees sits above the firelight. */
#wrapper { position: relative; z-index: 1; }

/* ==========================================================================
   Typography & selection
   ========================================================================== */

/* Numbers everywhere read better aligned and monospaced. */
.row_val,
#stores .row_val,
#village .row_val,
#workers .row_val,
.outfitRow .row_val,
.hp,
#hullRemaining,
#backpackSpace,
#healthCounter,
.damageText {
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Legends: the small labels notched into panel borders. */
#stores:before,
#weapons:before,
#village:before,
#outfitting:before,
#perks:before,
#buildBtns:before,
#craftBtns:before,
#buyBtns:before,
#lootButtons:before,
#dropMenu:before {
	font-family: var(--font-prose);
	font-size: var(--fs-micro);
	font-style: italic;
	letter-spacing: 0.06em;
	color: var(--ink-dim);
}

::selection      { background: var(--ember-wash); color: var(--ink-strong); }
::-moz-selection { background: var(--ember-wash); color: var(--ink-strong); }

#description textarea::selection      { background: var(--ember-edge); color: var(--ink-strong); }
#description textarea::-moz-selection { background: var(--ember-edge); color: var(--ink-strong); }

/* Focus rings: visible for keyboards, invisible for mice. */
:focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 2px;
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */

* {
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
}

*::-webkit-scrollbar        { width: 8px; height: 8px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  { background: var(--line); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }