.button {
	padding: var(--gap-m);
	background:
		linear-gradient(to bottom, transparent 0%, rgba(var(--shading), .1) var(--gap-s), transparent var(--gap-l)),
		linear-gradient(rgb(var(--accent)), rgb(var(--accent)));

	border: var(--thickness) solid rgb(var(--shading));
	border-radius: var(--rounding);
	text-align: center;
	cursor: pointer;
}

.button > * {
	text-align: initial;
}

@media (prefers-color-scheme: dark) {
	.button {
		text-shadow: 0 2px 0 rgb(var(--base));
	}
}

.button--selected {
	box-shadow:
		inset 0 0 8px 3px  rgb(var(--base)),
		      0 0 4px 0   rgba(var(--shading), .5);
}

.button--disabled {
	background: rgba(var(--shading), .3);
	border-color: transparent;
	opacity: .7;
	cursor: default;
}

.menu {
	display: grid;
	gap: var(--gap-s);
}

.menu--horizontal {
	grid-auto-flow: column;
	grid-auto-columns: auto;
	grid-template-rows: 1fr;
}

.menu--vertical {
	grid-auto-flow: row;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
}

.menu--uniform.menu--horizontal { grid-auto-columns: 1fr; }
.menu--uniform.menu--vertical { grid-auto-rows: 1fr; }

#root {
	position: fixed;
	inset: 0;
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
}

.app-router__content {
	flex: 1 1 auto;
	overflow: auto;
}

.app-router__menu {
	flex: 0 0 auto;
	background: rgb(var(--base));
	padding: var(--gap-s) 0;
	overflow-x: auto;
}

.app-router__container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--gap-s);
}

.flat-layout {
	padding: var(--gap-s) 0 0 0;
}

.typography-header,
.typography-header {
	display: block;
	margin-bottom: var(--gap-m);
}

.typography-header--main {
	font-size: var(--size-l);
	text-align: center;
}

.typography-header--sub {
	font-size: var(--size-m);
}

.icon {
	position: relative;
	/* background: rgba(var(--shading), .2); */
	background: radial-gradient(#808080 30%, #534a41 100%);
	border-radius: var(--rounding);
}

.icon,
.icon > svg {
	display: inline-block;
	width: 100%;
	height: 100%;
	cursor: default;
	user-select: none;
}

.icon__quantity {
	font-size: var(--size-l);
	position: absolute;
	right: var(--gap-s);
	bottom: var(--gap-s);
	z-index: 1;
	text-shadow:
		0 0 2px rgb(var(--base)),
		0 0 1px rgb(var(--base));
}

/* force square shape */
.icon::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	padding: 0 0 100% 0;
}

.entry-card {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr;
	gap: var(--gap-s);
}

.entry-card__meta {
	grid-column: 2 / span 4;
	background: rgba(var(--shading), .2);
	border-radius: var(--rounding);
	padding: var(--gap-m);
}

.entry-card--has-action > .entry-card__meta {
	grid-column: 2 / span 3;
}

.entry-card__action {
	font-size: 2rem;
}

.hero-equip-item__currently-equipped {
	text-align: left;
}

.progress-bar {
	position: relative;
	overflow: clip;
	text-align: center;
	font-size: var(--size-s);
	padding: var(--gap-s);
	background: rgb(var(--base));
	border: var(--thickness) solid rgb(var(--shading));
	border-radius: var(--rounding);
}

.progress-bar__indicator {
	position: absolute;
	z-index: 0;
	inset: 0;
	background: rgb(var(--accent));
	transform-origin: left center;
	transform: scale3d(var(--progress), 1, 1);
	transition: transform .5s cubic-bezier(0, 1, .25, 1);
}

.progress-bar__label {
	position: relative;
	z-index: 1;
}

.button-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.stats-grid__container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	justify-content: center;
}


.crafting-recipe__controls {
	display: grid;
	width: 50%;
	margin: var(--gap-l) auto 0 auto;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr 1fr;
	align-items: center;
	justify-items: stretch;
	gap: var(--gap-s);
}

.crafting-recipe__quantity-value {
	text-align: center;
}

.crafting-recipe__start-button {
	grid-column: 2 / span 3;
}

.sticky-layout__header {
	position: sticky;
	z-index: 10;
	top: 0;
	padding: var(--gap-s) 0;
	background: rgb(var(--base));
}

.item-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
	grid-auto-rows: 1fr;
	grid-auto-flow: row;
	gap: var(--gap-s);
}

.entity-detail {
	margin: var(--gap-m);
	padding: var(--gap-l);
	border: var(--thickness) solid rgb(var(--shading));
	border-radius: var(--rounding);
}

.entity-detail h2 {
	font-size: var(--size-l);
}

.entity-detail h3 {
	margin: var(--gap-m) 0 var(--gap-s) 0;
}


.entity-detail__attributes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr) minmax(30px, auto));
	grid-auto-rows: 1fr;
	grid-auto-flow: row;
	gap: var(--gap-s) var(--gap-m);
	color: rgba(var(--text), .7);
}

.entity-detail__attributes dt {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: clip;
}

.entity-detail__attributes dd {
	text-align: right;
	color: rgb(var(--text));
}


.entity-detail__rotation {
	list-style: decimal inside;
	color: rgba(var(--text), .7);
}

.entity-detail__rotation em {
	color: rgb(var(--text));
}

.quest-start {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto 1fr;
	grid-auto-flow: column;
	justify-items: stretch;
	align-items: center;
}

.quest-start__versus {
	font-size: var(--size-l);
}

.quest-start__quest-prompt {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

@media (min-width: 600px) {
	.quest-start {
		grid-template-columns: 1fr auto 1fr;
		grid-template-rows: auto 1fr;
		grid-auto-flow: row;
		align-items: start;
	}

	.quest-start__header {
		grid-column: span 3;
	}

	.quest-start__quest-prompt {
		align-self: center;
		flex-direction: column;
	}
}

@import url('https://fonts.googleapis.com/css2?family=Texturina&display=swap');

/* define app theme */
html {
	font-family: 'Texturina', serif;
	/* line-height: 1.4;
	font-size: 14px;
	text-size-adjust: 100%; */

	/* The background for the page and UI components.
	 * Should not be used with alpha.
	 */
	--base: 250, 250, 250;

	/* Accent color for UI components such as default buttons.
	 * Should not be used with alpha.
	 */
	--accent: 255, 162, 0;

	/* Color to shade parts of UI with (borders, highlights etc.).
	 * Best used with alpha and layering.
	 */
	--shading: 0, 0, 0;

	/* The color of all text.
	 * Must be clearly readable over both --base and --accent.
	 * Usually the same hue as --shading.
	 * Can be used with alpha to dim text.
	 */
	--text: 50, 50, 50;

	/* three levels of text size */
	--size-s: 0.8rem;
	--size-m: 1.3rem;
	--size-l: 1.5rem;

	/* three levels of padding/margin */
	--gap-s: 0.25rem;
	--gap-m: 0.75rem;
	--gap-l: 1.5rem;

	/* borders and outlines */
	--thickness: 1px;
	--rounding: 5px;
}

@media (prefers-color-scheme: dark) {
	html {
		--base: 42, 42, 42;
		--accent: 161, 119, 48;
		--text: 240, 240, 240;
		--shading: 255, 255, 255;
	}
}

/* tablets, small screens */
/* @media (min-width:  600px) { html { font-size: 16px; } } */

/* fullHD desktops, TVs */
/* @media (min-width: 1257px) { html { font-size: 18px; } } */

/* 1440p desktops, TVs */
/* @media (min-width: 1921px) { html { font-size: 24px; } } */

/* 4K desktops, TVs */
/* @media (min-width: 2561px) { html { font-size: 34px; } } */

/* apply base colors */
body {
	background: rgb(var(--base));
	color: rgb(var(--text));
}

/* resets global styles */
* {
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;

	/* disable unwanted gestures */
	touch-action: pan-y;
}

input, button {
	text-align: left;
	background: transparent;
	border: none;
	outline: none;
}