/**
 * @file theme.css
 * @brief design tokens - the hoff.world skin (overrides ggsp/web/theme.css defaults).
 * @copyright Copyright (c) 2026 hoff.industries
*/

:root {
	--accent:   #a89ec7;
	--accent-2: #e3f17b;
	--accent-3: #f86828;
	--cta:      #00d8b7;
	--text:     #f0ece2;
	--bg:        #1c1c1c;
	--surface:   #2d1f12;
	--header-bg: #3b291c;

	--rank-1:    #ffdb5b;
	--rank-2:    #cbf4ff;
	--rank-3:    #ecd299;
	--rank-misc: white;
}

/* reserve the scrollbar gutter on every page so the fixed background is framed
   against a constant viewport width; without it a page that scrolls (the
   leaderboard) is a scrollbar-width narrower than one that doesn't, and
   cover + center re-frame output.jpg, shifting it between pages. */
html {
	scrollbar-gutter: stable;
}

/* every page tiles the bedrock texture as its fixed background, dimmed by a flat
   black overlay so the texture doesn't wash out the text; index is the exception
   (body.index_page below) and carries the overworld render instead. */
body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
		url(images/bedrock.png);
	background-repeat: repeat;
	background-attachment: fixed;
}

/* index: the overworld render (cover-scaled) instead of bedrock. lazy-load chain:
   the blurred placeholder (::before) is the only background fetched up front; the
   full render is withheld until lazy_load_background() sets .bg_loaded, so
   output.jpg never races the blur. */
body.index_page {
	background-image: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

body.index_page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url(images/output-blur.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: opacity 0.6s ease;
}

body.index_page.bg_loaded {
	background-image: url(images/output.jpg);
}

body.index_page.bg_loaded::before {
	opacity: 0;
}

/* the join page shows the nether render inside the hero box behind the IP; the
   page itself keeps the bedrock background. lazy-load chain: the blur is the only
   image fetched up front; the full render is withheld until lazy_load_background()
   sets .bg_loaded. */
body.join_page .hero_container.join {
	background-image: url(images/nether-blur.jpg);
	background-position: center;
}

body.join_page.bg_loaded .hero_container.join {
	background-image: url(images/nether.jpg);
}

/* the profile page shows output.jpg inside the top-maps card; the page itself
   keeps the bedrock background. */
body.profile_page .profile_top_maps_container {
	background-image: url(images/output.jpg);
	background-position: center;
}

header {
	background-image: url(images/dirt.jpg);
}

/* reserve the logo footprint before it loads so the header buttons don't jump
   (CLS). ratio matches hoffworld-text-sm.png (337x120); height is set per
   orientation elsewhere, width stays auto and is derived from this. */
.header_image {
	aspect-ratio: 337 / 120;
}

/* this site: buttons are plain text - no fill, no outline (overrides ggsp defaults) */
.dot_button {
	background: none !important;
	border: none !important;
	font-size: 1.3rem;
}

/* this site: slimmer header bar (landscape only; portrait keeps its auto height) */
@media (min-aspect-ratio: 1 / 1) {
	body header {
		height: 3.5rem;
	}

	/* scale the logo to the slim header; vcenter of header items comes from ggsp base.css */
	.header_image {
		height: 80%;
		width: auto;
	}
}

/* this site: small pixel-art advancement icon sitting before each achievement's
   title. crisp-edges/pixelated keep the 16px source art sharp when scaled up. */
.achievement-icon {
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.4em;
	vertical-align: middle;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

/* this site: the player's cached minecraft face, inline before their name (the
   avatar that replaces a country flag). pixelated keeps the upscaled 8x8 face
   art crisp. */
.player-face {
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.4em;
	vertical-align: middle;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

/* this site: minecraft skin rendered into the profile metadata card */
.profile_skin {
	display: block;
	margin: 0 auto 0.8em;
	height: 14em;
	width: auto;
	image-rendering: pixelated;
}