/* re-styling of react-burger-menu classes */

.bm-menu-wrap {
	background-color: var(--o⋄color⁚bg--main--backdrop);
	border-right: solid 2px;
}

/* https://stackoverflow.com/a/37600130/587407 */
/* big screens */
.bm-menu-wrap {
	width: 400px !important;
}
/* small screens */
@media screen and (max-width: 500px) {
	.bm-menu-wrap {
		width: 80% !important;
	}
}

.bm-overlay {
	background-color: var(--o⋄color⁚bg--main--backdrop);
}
.bm-cross {
	background: var(--o⋄color⁚fg--main);
}
.bm-cross-button {
	top: 7px !important;
	left: 7px !important;
}

.bm-burger-button {
	z-index: calc(51 + var(--omr⋄ui__meta-view--z-index));
	position: fixed;
	left: 0;
	top: 0;
	width: calc(var(--diameter) * var(--visible-ratio));
	height: calc(var(--diameter) * var(--visible-ratio));
}

/* https://github.com/negomi/react-burger-menu/issues/220#issue-289936395 */
.bm-overlay,
.bm-menu-wrap {
	transition-duration: .4s !important;
}

/************/

.bm-menu-wrap .omr-auto-logo {
	text-align: center;
	width: 100%;
	padding: 24px 1em 0 1em;
}
.bm-menu-wrap .omr-auto-logo img {
	width: 100%;
}


#about-panel {
	position: fixed;
	top: 0;
	left: 0;
	padding: 30px;
	text-align: center;
	width: 100%;
	background-color: var(--o⋄color⁚bg--main--backdrop);
}


#about-panel .omr-auto-logo {
	width: 300px;
	margin: 0 auto;
}
#about-panel .omr-auto-logo img {
	width: 100%;
}


/* 3rd party override */
.notification {
	background-color: var(--o⋄color⁚bg--main--backdrop) !important;
	padding: .2rem .5rem !important;
}
.notification > h4,
.notification > p {
	margin: .3em 0;
}
.notification {
	color: inherit !important;
	font-size: var(--o⋄font-size--default) !important;
}
.notification-title {
	color: inherit !important;
	font-size: var(--o⋄font-size--default) !important;
}
.notification-message {
	font-size: var(--o⋄font-size--default) !important;
}
.notification-dismiss {
	color: var(--o⋄color⁚fg--main) !important;
	background-color: var(--o⋄color⁚bg--highlight--2) !important;
}

.notification-error {
	color: var(--o⋄color⁚fg--error) !important;
	border: none !important;
	border-left: solid calc(var(--o⋄border--thickness) * 3) var(--o⋄color⁚fg--error) !important;
}
.notification-warning {
	color: var(--o⋄color⁚fg--warning) !important;
	border: none !important;
	border-left: solid calc(var(--o⋄border--thickness) * 3) var(--o⋄color⁚fg--warning) !important;
}
.notification-info {
	color: var(--o⋄color⁚fg--info) !important;
	border: none !important;
	border-left: solid calc(var(--o⋄border--thickness) * 3) var(--o⋄color⁚fg--info) !important;
}
.notification-success {
	color: var(--o⋄color⁚fg--success) !important;
	border: none !important;
	border-left: solid calc(var(--o⋄border--thickness) * 3) var(--o⋄color⁚fg--success) !important;
}

/* make room for the OMR HUD
 * (sorry for the static values = matching TBRPG)
*/
@media screen and (max-width: 900px) {
	.notifications-tc {
		padding-top: calc(var(--omr⋄ui__hamburger--visible-heigth_) * var(--omr⋄ui__scale) * .8) !important;
	}
}
@media screen and (max-width: 800px) {
	.notifications-bc {
		padding-bottom: calc(var(--omr⋄ui__bottom-menu--height_) * var(--omr⋄ui__scale) * 1.2) !important;
	}
}

/* solve the bug of notif blanket preventing from clicking */
.notifications-wrapper > div {
	pointer-events: none;
}
.notifications-wrapper > div > div.notification {
	pointer-events: initial;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}



:root {
	/* transfer the env() to variables so that
	 * - we can programmatically read them
	 * - we can override them (carefully)
	 * Of course only the var() version must be used in the framework.
	 */
	--safe-area-inset-top:    env(safe-area-inset-top,    0px);
	--safe-area-inset-right:  env(safe-area-inset-right,  0px);
	--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
	--safe-area-inset-left:   env(safe-area-inset-left,   0px);
}

:root {
	--o⋄scale: 1.0; /* overall scale of the UI, to allow programmatic scaling TODO calc(var(--o⋄scale) * XXX);*/
	--o⋄adjusted-em: 1em; /* use this instead of the em unit, to allow each font to slightly adjust its em */

	/* base sizes */
	--o⋄content-recommended-width: calc(650px * var(--o⋄scale)); /* a suggested good max width for text content. Taken from https://bettermotherfuckingwebsite.com/ */
	--o⋄font-size--default: calc(14px * var(--o⋄scale));
	--o⋄line-height--default: 1.5;
	--o⋄border--thickness: 1px;
	--o⋄header-scale-ratio: 2; /* the ratio between the h1 font size and the baseFontSize.
	    So if the scale ratio is 2 and the baseFontSize is 16px then the h1 font size is 32px
	    inspired by https://kyleamathews.github.io/typography.js/
	   */

	/* TODO share the padding values? */
}


/*********************/

:root {
}

/* apply a natural box layout model to all elements, but allowing components to change
 * https://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * https://github.com/mike-engel/a11y-css-reset/pull/12#issuecomment-516582884
 */
html                   { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* but allow to reset it if needed
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
.box-sizing-reset {
	box-sizing: initial;
}

/*********************/

/* https://css-tricks.com/reset-all-margins-padding/
 * https://mxstbr.com/thoughts/margin
 */
* {
	margin: 0;
	padding: 0;
}

/*********************/

html, body {
	height: 100%;
	min-height: 100%;
	width: 100%;
}

html {
	/* https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations */
	scroll-behavior: smooth;
}

body {
	padding: .7em; /* good default, cancel it explicitly if needed */

	/* adapted from https://perfectmotherfuckingwebsite.com */
	max-width: var(--o⋄content-recommended-width);
	margin: 0 auto; /* 0 for the 100% trick to work, auto for centering */

	/* defaults, overrides welcome */
	font-family: var(--o⋄font-family--fast_and_good_enough);
	color: var(--o⋄color⁚fg--main);
	background-color: var(--o⋄color⁚bg--main);
	accent-color: var(--o⋄color⁚fg--accent); /* https://web.dev/accent-color/ https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/ */

	/* https://www.leejamesrobinson.com/blog/how-stripe-designs-beautiful-websites/ */
	text-rendering: optimizeLegibility; /* challenge about perf: https://marco.org/2012/11/15/text-rendering-optimize-legibility
	                                     * Tested: this options makes a TOO HUGE difference in quality to be missed.
	                                     * For ex. it enables the computing of lighter/bolder variants.
	                                     */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	line-height: var(--o⋄line-height--default);
	font-size: var(--o⋄font-size--default);
}

/* Note that h4~h6 are smaller than p! usage not recommended */

h1, h2, h3 {
	/* line-height: 1.2;/* https://perfectmotherfuckingwebsite.com/ */
}
h1, h2, h3, p {
	margin: 0; /* cancel normalize.css. Please use a flow/rhythm class instead! */
}
h1 {
	font-size: calc(var(--o⋄font-size--default) * var(--o⋄header-scale-ratio));
}
h2 {
	font-size: calc(var(--o⋄font-size--default) * (1 + ((var(--o⋄header-scale-ratio) - 1) * .66)));
}
h3 {
	font-size: calc(var(--o⋄font-size--default) * (1 + ((var(--o⋄header-scale-ratio) - 1) * .33)));
}


/* nicer lists */
ul, ol {
	/* instead of fixed */
	padding-inline-start: 1.5em; /* nice and aligns with a <details> */
}


/* nicer collapsibles */
details {
	border: dashed var(--o⋄border--thickness) transparent;
	padding-left: .4em;
}
details summary {
	/* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
	cursor: pointer;
}
details summary > * {
	/* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
	display: inline;
}
details[open] {
	border-color: var(--o⋄color⁚fg--main);
}
details > *:nth-child(n+2) { /* assuming the 1st child is the <summary> */
	padding-left: 1.05em;
}

/* nicer */
figure {
	text-align: center;
}


img {
	/* src: ? */
	image-rendering: -webkit-optimize-contrast;
	/* https://photo.stackexchange.com/questions/104337/how-i-can-losslessly-rotate-photos#comment217649_104340 */
	image-orientation: from-image;
}


/* Adapt links to the main color.
 * Better than the defaults.
 */
a {
	text-decoration-color: var(--o⋄color⁚fg--secondary);
	touch-action: manipulation; /* we assume PWA, https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ */
}
a:link,
a:visited {
	color: inherit;
}
a:hover,
a:active {
	color: var(--o⋄color⁚fg--activity-outline);
}


/* Nicer HR
 * possible ideas: https://css-tricks.com/examples/hrs/
 */
hr {
	/* simple one */
	width: 100%;
	border: none;
	border-top: var(--o⋄border--thickness) solid;
	background-color: var(--o⋄color⁚fg--ancillary);
}

iframe {
	/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes */
	border: 0;
}

/******* misc *******/

/* Alter the ugly focus ring
 * https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
 * TODO UPDATE https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/#declarative-shadow-dom-could-help-popularize-style-encapsulation
 */
/* 1) no focus style for non-keyboard-inputs elements */
*:focus {
	outline: none;
}
/* 2) and for keyboard users, override everything with
 *    a classic ring when focused on any element
 */
body.user-is-tabbing *:focus {
	outline: 5px auto var(--o⋄color⁚fg--activity-outline);
}

/* TODO style more controls http://filamentgroup.github.io/select-css/demo/ */


/************ buttons ************
 * https://css-tricks.com/overriding-default-button-styles/
 * https://fvsch.com/code/styling-buttons/
 */


/* Simple styling derived from "button 8" from
 * https://fdossena.com/?p=html5cool/buttons/i.frag
 */
button {
	touch-action: manipulation; /* we assume PWA, https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ */

	--border--thickness: var(--o⋄border--thickness__button, var(--o⋄border--thickness));

	/* TODO fit-content ? https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content */
	display: inline-block;
	padding: .3em 2.1em;
	margin: .1em; /* TODO remove and move to a container? https://mxstbr.com/thoughts/margin */
	border: solid calc(var(--border--thickness) * 2) var(--o⋄color⁚fg--main);

	background-color: var(--o⋄color⁚bg--highlight--1);
	color: var(--o⋄color⁚fg--main);
	text-decoration: none;
	text-align: center;

	/* stripe.com
	box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); */
}
button:hover {
	background-color: var(--o⋄color⁚bg--highlight--2);
	/*box-shadow: 0 0 .3em 0 var(--o⋄color⁚bg--main--backdrop);*/
}
button:active {
	background-color: var(--o⋄color⁚bg--highlight--2);
	border-color: var(--o⋄color⁚fg--activity-outline);
}


/************ progress ************/

/* Reset the default appearance
 * https://css-tricks.com/html5-progress-element/
 * https://snook.ca/archives/html_and_css/animating-progress
 */
progress {
	--o⋄color⁚progress--bg: var(--o⋄color⁚bg--highlight--1);
	--o⋄color⁚progress-border: var(--o⋄color⁚bg--highlight--1);
	--o⋄color⁚progress-bar: var(--o⋄color⁚fg--main);

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	vertical-align: middle;
	background-color: var(--o⋄color⁚progress--bg);
	border: solid var(--o⋄border--thickness) var(--o⋄color⁚progress-border);
	overflow: hidden;
}
/* necessary to style the progress bar background */
progress::-webkit-progress-bar {
	background-color: var(--o⋄color⁚progress--bg);
}
progress::-webkit-progress-value {
	background-color: var(--o⋄color⁚progress-bar);
}
progress::-moz-progress-bar {
	background-color: var(--o⋄color⁚progress-bar);
}
progress::-ms-fill {
	background-color: var(--o⋄color⁚progress-bar);
	border: 0;
}


/************ scroll bars ************/

/* Standard
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
 */
html, body {
	/* <scrollbar color> <scrollbar track color> */
	scrollbar-color: var(--o⋄color⁚bg--highlight--1) var(--o⋄color⁚bg--main);
	scrollbar-width: thin;
}
*, *::before, *::after { scrollbar-color: inherit; scrollbar-width: inherit; }


/* non-standard Chrome
 * https://stackoverflow.com/a/14150577/587407
 * https://css-tricks.com/almanac/properties/s/scrollbar/
 */
::-webkit-scrollbar {
	width: .5em;
}
::-webkit-scrollbar-thumb {
	background-color: var(--o⋄color⁚bg--highlight--2);
	/*-webkit-box-shadow: inset 0 0 .4em var(--o⋄color⁚bg--highlight--2);*/
}


/* https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties/
 * https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
 */

:root {
	/* sane default */
	--flow-space: calc(.75 * var(--o⋄adjusted-em));
}

.o⋄children-spacing⁚flow {
}
.o⋄children-spacing⁚flow > * + * {
	margin: var(--flow-space) 0;
}
.o⋄children-spacing⁚flow > hr {
	margin: calc(.5 * var(--flow-space)) 0;
}
.o⋄children-spacing⁚flow > li {
	margin: calc(0.1 * var(--flow-space)) 0;
}

.o⋄children-spacing⁚flow-spaceꘌnone {
	--flow-space: 0;
}
/*
.o⋄children-spacing⁚flow-spaceꘌdefault {
	--flow-space: calc(.75 * var(--o⋄adjusted-em));
}
.o⋄children-spacing⁚flow-spaceꘌlarge {
	--flow-space: calc(1 * var(--o⋄adjusted-em));
}*/


/* Good tools:
 * https://www.cssportal.com/css-color-converter/
 * https://picular.co/quality
 *
 * Principles:
 * - https://ianstormtaylor.com/design-tip-never-use-black/
 */
:root {
	/* modifiers, to be used as overlays */
	--o⋄color⁚darker--10: rgba(0, 0, 0, .1);
	--o⋄color⁚darker--20: rgba(0, 0, 0, .2);
	--o⋄color⁚darker--90: rgba(0, 0, 0, .9);

	--o⋄color⁚lighter--10: rgba(100%, 100%, 100%, .1);
	--o⋄color⁚lighter--20: rgba(100%, 100%, 100%, .2);
	--o⋄color⁚lighter--90: rgba(100%, 100%, 100%, .9);

	/*
	--o⋄color⁚dolt__quasi-black: hsl(0, 0%, 17%);
	--o⋄color⁚dolt__dark-grey:   hsl(0, 0%, 33%);
	--o⋄color⁚dolt__medium-grey: hsl(0, 0%, 66%);
	--o⋄color⁚dolt__quasi-white: hsl(0, 0%, 98%);
	*/

	/* from https://boz.com/
	 * Looks good on dark backgrounds
	 */
	--o⋄color⁚boz__gray:     hsl(0,    0%, 60%);
	--o⋄color⁚boz__yellow:   hsl(53,  87%, 57%);
	--o⋄color⁚boz__pink:     hsl(318, 87%, 69%);
	--o⋄color⁚boz__green:    hsl(93,  73%, 61%);
	--o⋄color⁚boz__cyan:     hsl(180, 86%, 52%);
	--o⋄color⁚boz__blue:     hsl(199, 81%, 56%);
	--o⋄color⁚boz__purple:   hsl(269, 83%, 77%);
}



.o⋄colorꘌmain {
	color: var(--o⋄color⁚fg--main);
}

.o⋄colorꘌsecondary {
	color: var(--o⋄color⁚fg--secondary);
}

.o⋄colorꘌancillary {
	color: var(--o⋄color⁚fg--ancillary);
}

.o⋄border-colorꘌancillary {
	border-color: var(--o⋄color⁚fg--ancillary);
}

/* Traditional, most efficient theme
 */

:root {

}


:root, /* this theme is the default */
[data-o-theme="light--default"] {
	/* quasi black */
	--o⋄dtoken⁚fg--h: 0;
	--o⋄dtoken⁚fg--s: 0%;
	--o⋄dtoken⁚fg--l: 17%;
	/* quasi white */
	--o⋄dtoken⁚bg--h: 0;
	--o⋄dtoken⁚bg--s: 0%;
	--o⋄dtoken⁚bg--l: 98%;

	--o⋄color⁚fg--main:       hsl(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l)); /* ex. header and text */
	--o⋄color⁚fg--secondary: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .66); /* ex. date an article was published */
	--o⋄color⁚fg--ancillary: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .33); /* ex. copyright notice in a footer */

	--o⋄color⁚fg--accent: var(--o⋄color⁚fg--main);
	--o⋄color⁚fg--activity-outline: #7AACFE; /* accent on tab, seldom used */

	--o⋄color⁚bg--main:            hsl(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l));
	--o⋄color⁚bg--main--backdrop: hsla(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l), .9); /* for modals, tooltips etc. tried and tested, 0.9 is the best, see stories */

	--o⋄color⁚bg--highlight--1: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .1); /* bg color visible on normal bg, ex. for buttons */
	--o⋄color⁚bg--highlight--2: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .3); /* alt, ex. for hovered/clicked buttons */

	--o⋄color⁚shadow: hsla(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l), .2); /* = fg translucent */

	--o⋄color⁚fg--error: hsl(2, 75%, 45%);
	--o⋄color⁚fg--warning: var(--o⋄color⁚boz__yellow);
	--o⋄color⁚fg--info: var(--o⋄color⁚boz__blue);
	--o⋄color⁚fg--success: var(--o⋄color⁚boz__green);
}

/* Traditional dark theme
 */

:root {

}

/* TODO https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f
 */
[data-o-theme="dark--default"] {
	/* quasi white */
	--o⋄dtoken⁚fg--h: 0;
	--o⋄dtoken⁚fg--s: 0%;
	--o⋄dtoken⁚fg--l: 98%;
	/* quasi black */
	--o⋄dtoken⁚bg--h: 0;
	--o⋄dtoken⁚bg--s: 0%;
	--o⋄dtoken⁚bg--l: 17%;

	--o⋄color⁚fg--main:       hsl(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l));
	--o⋄color⁚fg--secondary: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .66);
	--o⋄color⁚fg--ancillary: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .33);

	--o⋄color⁚fg--accent: var(--o⋄color⁚fg--main);
	--o⋄color⁚fg--activity-outline: #7AACFE;

	--o⋄color⁚bg--main:            hsl(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l));
	--o⋄color⁚bg--main--backdrop: hsla(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l), .9);

	--o⋄color⁚bg--highlight--1: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .2);
	--o⋄color⁚bg--highlight--2: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .4);

	--o⋄color⁚shadow: hsla(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l), .2);

	--o⋄color⁚fg--error: red;
	--o⋄color⁚fg--warning: var(--o⋄color⁚boz__yellow);
	--o⋄color⁚fg--info: var(--o⋄color⁚boz__blue);
	--o⋄color⁚fg--success: var(--o⋄color⁚boz__green);
}

/*
TODO steal themes from:
  multiples https://themer.dev/
  dark: https://github.com/gaearon/subliminal
 */

/* other themes must be imported manually */


/* very convenient container to propagate full height
 * NOTE: full height applied by default on <html> and <body>
 * but adding this activates the debug markings
 */
.o⋄top-container {
	display: flex;
	flex-direction: column;

	height: 100%;

	/* To be able to scroll inside a flexbox
	 * https://medium.com/@stephenbunch/how-to-make-a-scrollable-container-with-dynamic-height-using-flexbox-5914a26ae336
	 */
	flex-grow: 1;
	min-height: 0; /* or else min-height may be too big */
}

.o⋄centered-article {
	max-width: var(--o⋄content-recommended-width);
	width: 100%; /* avoid lower than max if possible. Possible alternative: inherit */

	margin: 0 auto;/* horizontal centering */

	padding: .7em; /* looks good by default. Use o⋄paddingꘌnone else */
}

.o⋄body⁚full-viewport {
	max-width: unset;
	width: 100%; /* avoid lower than max if possible */
}

.o⋄input-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.o⋄input-container input[type="checkbox"], .o⋄input-container input[type="radio"] {
	margin-right: .3em;
}

.o⋄border⁚default {
	border: solid var(--o⋄border--thickness) var(--o⋄color⁚fg--main);
}

.o⋄error-report {
	font-size: xx-small;
	font-family: monospace;
	color: var(--o⋄color⁚fg--error);
	/*background-color: rgba(0, 0, 0, .3); /* TODO */
	background-color: var(--o⋄color⁚bg--main--backdrop);
	margin: auto;
	z-index: 100000; /* just in case TODO check */
}
.o⋄error-report > pre, .o⋄error-report > samp {
	white-space: pre-wrap;
	text-align: initial;
}


.o⋄box {
	padding: .5em;
	border: solid calc(var(--o⋄border--thickness) * 1) var(--o⋄color⁚fg--main);
}
.o⋄bg-colorꘌbackdrop {
	background-color: var(--o⋄color⁚bg--main--backdrop);
}


.o⋄bg⁚cover {
	background-size: cover;
	background-position: center; /* good default */
}

/*********************/
/* borders for debug, display only if debug activated */


.o⋄top-container {
	/* debug technique */
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}
/* comment/uncomment this for debug*/
/*.o⋄top-container {
	border-width: 1px;
}*/

/* Note: will only work if has class o⋄top-container (should) */
html                                  { border-color: red; }
body                                  { border-color: greenyellow; }
body .o⋄top-container:nth-child(odd)  { border-color: greenyellow; }
body .o⋄top-container:nth-child(even) { border-color: red; }


/*********************/
/* TODO https://equinusocio.dev/blog/web-fonts-in-2018 */

:root {
	/* https://perfectmotherfuckingwebsite.com/ */
	--o⋄font-family--fast_and_good_enough: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "Segoe UI", "lucida grande", "helvetica neue", helvetica, "Fira Sans", roboto, noto, "Droid Sans", cantarell, oxygen, ubuntu, "franklin gothic medium", "century gothic", "Liberation Sans", sans-serif;
	--o⋄font-family--system: "o⋄system", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "Segoe UI", "lucida grande", "helvetica neue", helvetica, "Fira Sans", roboto, noto, "Droid Sans", cantarell, oxygen, ubuntu, "franklin gothic medium", "century gothic", "Liberation Sans", sans-serif;
	--o⋄font-family--roboto: "Roboto", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "Segoe UI", "lucida grande", "helvetica neue", helvetica, "Fira Sans", roboto, noto, "Droid Sans", cantarell, oxygen, ubuntu, "franklin gothic medium", "century gothic", "Liberation Sans", sans-serif;
	--o⋄font-family--roboto-condensed: "Roboto Condensed", "Roboto", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "Segoe UI", "lucida grande", "helvetica neue", helvetica, "Fira Sans", roboto, noto, "Droid Sans", cantarell, oxygen, ubuntu, "franklin gothic medium", "century gothic", "Liberation Sans", sans-serif;
	--o⋄font-family--roboto-mono: "Roboto Mono", monospace;
}

/*********************/

.o⋄fontꘌfast-and-good-enough {
	font-family: var(--o⋄font-family--fast_and_good_enough);
	/* TODO font size */
}

.o⋄fontꘌsystem {
	font-family: var(--o⋄font-family--system);
}

.o⋄fontꘌroboto {
	font-family: var(--o⋄font-family--roboto);
}

.o⋄fontꘌroboto-condensed {
	font-family: var(--o⋄font-family--roboto-condensed);
}

.o⋄fontꘌroboto-mono {
	font-family: var(--o⋄font-family--roboto-mono);
}

/*********************/


/* https://css-tricks.com/snippets/css/system-font-stack/ */
@font-face {
	font-family: 'o⋄system';
	font-style: normal;
	font-weight: 300;
	src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* adapted from:
 https://fonts.google.com/?selection.family=Roboto|Roboto+Condensed|Roboto+Mono&query=roboto&selection.subset=latin-ext
 @import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Mono&subset=latin-ext');
 */
/* TODO load from local npm ? */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto'),
		local('Roboto-Regular'),
		url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'),
		url('font--roboto_regular--latin.v18.0f7dd874.woff2') format('woff2');
	/* latin */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto'),
		local('Roboto-Regular'),
		url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2'),
		url('font--roboto_regular--latin-ext.v18.2026f26a.woff2') format('woff2');
	/* latin-ext */
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* https://gist.github.com/mfornos/9991865 */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src:
		local('Apple Color Emoji'),
		local('Android Emoji'),
		local('Segoe UI'),
		local(EmojiSymbols),
		local(Symbola);
	/* Emoji unicode blocks */
	unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}


@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto Condensed'),
		local('RobotoCondensed-Regular'),
		url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQk6YvM.woff2) format('woff2'),
		url('font--roboto_condensed_regular--latin.v16.9f4a566b.woff2') format('woff2');
	/* latin */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto Condensed'),
		local('RobotoCondensed-Regular'),
		url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DQk6YvNkeg.woff2) format('woff2'),
		url('font--roboto_condensed_regular--latin-ext.v16.e7d95ce9.woff2') format('woff2');
	/* latin-ext */
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto Mono'),
		local('RobotoMono-Regular'),
		url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2) format('woff2');
	/* latin */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto Mono'),
		local('RobotoMono-Regular'),
		url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhFq3-cXbKDO1w.woff2) format('woff2');
	/* latin-ext */
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


.o⋄text-noselect {
	cursor:  pointer;

	/* disable text selection, since unclean clicks/taps may select text
	 * and cause inconvenience (especially on mobile)
	 * https://stackoverflow.com/a/4407335/587407
	 */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/******* lists *******/

.o⋄nav-list {
	list-style-type: none;

	/* helps if we want to do fancy positioning
	 * ex. combine with .o⋄flex--centered-content
	 */
	display: flex;
	flex-direction: row;
}
.o⋄nav-list li {
}
.o⋄nav-list a {
	text-decoration: none; /* usually what we want */
}
/* https://stackoverflow.com/a/8185290/587407 */
.o⋄nav-list li + li  {
	margin-left: 2em;
}


/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
.o⋄plain-list {
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
	padding-left: 0;
}


/* special "inline" button */
button.o⋄button--inline {
	--o⋄border--thickness__button: 0; /* override own CSS var for this typeof button */
	padding: .1em .3em;
	border-radius: .25em;
}


.o⋄text-alignꘌcenter {
	text-align: center;
}

.o⋄positionꘌabsolute {
	position: absolute;
}
.o⋄positionꘌrelative {
	position: relative;
}
.o⋄positionꘌfixed {
	position: fixed;
}

/******* flex *******/

.o⋄flex--directionꘌrow {
	display: flex;
	flex-direction: row;
}
.o⋄flex--directionꘌcolumn {
	display: flex;
	flex-direction: column;
}

.o⋄flex--centered-content {
	justify-content: center;
	align-items: center;
	align-content: center;
}

/* https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space */
.o⋄flex-element--nogrow {
	flex-grow: 0;
}
.o⋄flex-element--grow {
	flex-grow: 1;
}


.o⋄paddingꘌnone {
	padding: 0;
}
.o⋄paddingꘌsmall {
	padding: .3em;
}
.o⋄paddingꘌmedium {
	padding: .7em;
}


.o⋄marginꘌnone {
	margin: 0;
}

/******* container utils *******/

.o⋄overflow-yꘌauto {
	overflow-y: auto;
}

/* XXX NO there is likely an underlying problem!
.o⋄no-overflow {
	overflow-x: hidden;
	overflow-y: hidden;
}
*/

.o⋄widthꘌ100pc {
	width: 100%;
}
.o⋄heightꘌ100pc {
	height: 100%;
}

/******* misc *******/
.o⋄fast-tap {
	touch-action: manipulation; /* https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ */
}


/******* emojis as icons *******
 * https://preethisam.com/2018/06/25/how-to-use-emojis-as-icons/
 */
.o⋄character-as-icon { /* TODO clarify. Emojis or more? */
	color: transparent;
	text-shadow: 0 0 var(--o⋄color⁚fg--main);
	vertical-align: text-top; /* visually better, this is not text */
}


.o⋄rotated⁚45deg {
	display: inline-block;
	transform-origin: 50% 50% 0;
	transform: rotate(45deg) translate3d( 0, 0, 0);
}
.o⋄rotated⁚90deg {
	display: inline-block;
	transform-origin: 50% 50% 0;
	transform: rotate(90deg) translate3d( 0, 0, 0);
}
.o⋄rotated⁚180deg {
	display: inline-block;
	transform-origin: 50% 50% 0;
	transform: rotate(180deg) translate3d( 0, 0, 0);
}
.o⋄rotated⁚270deg {
	 display: inline-block;
	 transform-origin: 50% 50% 0;
	 transform: rotate(270deg) translate3d( 0, 0, 0);
 }


/******* Typography *******/
.o⋄outline {
	/* not recommended but supported...
	https://webkit.org/blog/85/introducing-text-stroke/
	https://css-tricks.com/almanac/properties/t/text-stroke/
	https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
	 */
	/*-webkit-text-stroke: 1.5px #db3333; /* TODO relative + vars */

	--color: var(--o⋄color⁚bg--main--backdrop);

	text-shadow:
		1px  1px 0 var(--color),
		1px -1px 0 var(--color),
		-1px  1px 0 var(--color),
		-1px -1px 0 var(--color),
		1px  0px 0 var(--color),
		0px  1px 0 var(--color),
		-1px  0px 0 var(--color),
		0px -1px 0 var(--color);
}

/*! @offirmo-private/ui--browser--css | Unlicense | github.com/Offirmo/offirmo-monorepo/tree/master/3-advanced--browser/ui--browser--css */


:root {
	/* override parent framework variables here */
}

button {
	border-radius: .2em;
	cursor: inherit;
}


/*******/

.omr⋄full-size-background-layer {
	display: block;
	/*position: fixed;*/
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}

.omr⋄full-size-fixed-layer {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}

/*******/

.omr⋄bg-image⁚parchment-xxl {
	background-image: url('img--parchment-xxl.dce10996.jpg');
	background-size: cover;
}

.omr⋄bg-image⁚tiled-parchment {
	background-image: url('img--parchment-tile.2ecca3fa.png');
	background-repeat: repeat;
}

.omr⋄bg-image⁚tiled-marble_black {
	background-image: url('img--black_marble-tile.53d5d57a.png');
	background-repeat: repeat;
}

:root, /* this theme is the default */
[data-o-theme="light--default"] {
	/* TODO redo following LOD212 */
	--o⋄color⁚quality--poor:      hsl(0, 0%, 62%);
	--o⋄color⁚quality--common:    hsl(0, 0%, 20%);
	--o⋄color⁚quality--uncommon: hsl(123, 100%, 39%);
	--o⋄color⁚quality--rare:      hsl(210, 100%, 43%);
	--o⋄color⁚quality--epic:      hsl(276, 84%, 57%);
	--o⋄color⁚quality--legendary: hsl(30, 100%, 50%);
	--o⋄color⁚quality--artifact:  hsl(360, 100%, 64%);
}

/* "colorhunt 212" light on dark theme
 * https://www.colorhunt.co/c/212
 */

:root {
	--o⋄color⁚co212__beige:   hsl(42, 100%, 87%); /* #FFEBBC */
	--o⋄color⁚co212__blue:    hsl(185, 33%, 52%); /* #5DA7AE */
	--o⋄color⁚co212__brown:   hsl(337, 16%, 28%); /* #543D46 */
	--o⋄color⁚co212__dark:    hsl(248,  9%, 17%); /* #292830 */

	/*outline-color: var(--o⋄color⁚co212__beige);*/
}


[data-o-theme="dark--colorhunt212"] {
	/* light beige */
	--o⋄dtoken⁚fg--h: 42;
	--o⋄dtoken⁚fg--s: 100%;
	--o⋄dtoken⁚fg--l: 87%;
	/* dark */
	--o⋄dtoken⁚bg--h: 248;
	--o⋄dtoken⁚bg--s: 9%;
	--o⋄dtoken⁚bg--l: 17%;

	--o⋄color⁚fg--main:       hsl(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l));
	--o⋄color⁚fg--secondary: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .66);
	--o⋄color⁚fg--ancillary: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .33);

	--o⋄color⁚fg--accent: var(--o⋄color⁚fg--main);
	--o⋄color⁚fg--activity-outline: var(--o⋄color⁚co212__blue);

	--o⋄color⁚bg--main:            hsl(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l));
	--o⋄color⁚bg--main--backdrop: hsla(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l), .9);

	--o⋄color⁚bg--highlight--1: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .2);
	--o⋄color⁚bg--highlight--2: hsla(var(--o⋄dtoken⁚fg--h), var(--o⋄dtoken⁚fg--s), var(--o⋄dtoken⁚fg--l), .4);

	--o⋄color⁚shadow: hsla(var(--o⋄dtoken⁚bg--h), var(--o⋄dtoken⁚bg--s), var(--o⋄dtoken⁚bg--l), .2);

	--o⋄color⁚fg--error: red;
	--o⋄color⁚fg--warning: var(--o⋄color⁚boz__yellow);
	--o⋄color⁚fg--info: var(--o⋄color⁚boz__blue);
	--o⋄color⁚fg--success: var(--o⋄color⁚boz__green);
}

[data-o-theme="dark--colorhunt212"] {
	--o⋄color⁚quality--poor:      hsl(0, 0%, 62%);
	--o⋄color⁚quality--common:    hsl(0, 0%, 82%);
	--o⋄color⁚quality--uncommon:  hsl(85, 88%, 56%);
	--o⋄color⁚quality--rare:      hsl(221, 78%, 69%);
	--o⋄color⁚quality--epic:      hsl(296, 100%, 72%);
	--o⋄color⁚quality--legendary: hsl(39, 100%, 50%);
	--o⋄color⁚quality--artifact:  hsl(54, 100%, 69%);
}

/* We are forced to follow our parent's default */

/* this one is the recommended */

/* other themes must be imported manually */


@font-face {
	font-family: 'Spectral';
	src: url('webfont--spectral-regular.fae3cb71.woff') format('woff');
}

@font-face {
	font-family: 'PixAntiqua';
	src:url('webfont--pixantiqua.d45d52aa.woff') format('woff');
}

/*********************/

:root {
	--omr⋄font⁚spectral: 'Spectral', sans-serif;
	--omr⋄font⁚pixantiqua: 'PixAntiqua', sans-serif;
}

/*********************/

.omr⋄font⁚spectral {
	font-family: var(--omr⋄font⁚spectral);
	letter-spacing: -.05px;
}
.omr⋄text-with-shadow.omr⋄font⁚spectral,
.omr⋄text-with-shadow .omr⋄font⁚spectral,
.omr⋄font⁚spectral .omr⋄text-with-shadow
{
	color: var(--o⋄color⁚quasi-white);
	text-shadow:
		0.07em 0 black,
		0 0.07em black,
		-0.07em 0 black,
		0 -0.07em black;
}

.omr⋄font⁚pixantiqua {
	font-family: var(--omr⋄font⁚pixantiqua);
	letter-spacing: .35px;
	line-height: 1.65;
}
.omr⋄text-with-shadow.omr⋄font⁚pixantiqua,
.omr⋄text-with-shadow .omr⋄font⁚pixantiqua,
.omr⋄font⁚pixantiqua .omr⋄text-with-shadow
{
	color: var(--o⋄color⁚quasi-white);
	text-shadow:
		-2px 0 black,
		0 2px black,
		2px 0 black,
		0 -2px black;
}

/*********************/

/* credits: https://www.dota2.com/international/battlepass/ 2020/06 */
.omr⋄text⁚glowing--gold {
	color: #fff;
	text-shadow: 0px 0px 16px #C79123;
}

/* credits: https://www.dota2.com/international/battlepass/ 2020/06 */
[data-o-theme^='lod--'] .omr⋄text⁚outlined  {
	text-shadow: 0 2px 1px rgba(0,0,0,0.8);
}
.omr⋄text⁚outlined,
[data-o-theme^='dol--'] .omr⋄text⁚outlined  {
	text-shadow: 0 2px 1px rgba(255,255,255,0.8);
}

@font-face {
  font-family: 'icomoon-TBRPG';
  src:  url('icomoon-TBRPG.1da3129a.eot?wwormj');
  src:  url('icomoon-TBRPG.1da3129a.eot?wwormj#iefix') format('embedded-opentype'),
    url('icomoon-TBRPG.6deb7541.ttf?wwormj') format('truetype'),
    url('icomoon-TBRPG.b9a39902.woff?wwormj') format('woff'),
    url('icomoon-TBRPG.8536a8cc.svg?wwormj#icomoon-TBRPG') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icomoon-"], [class*=" icomoon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon-TBRPG' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icomoon-build:before {
  content: "\e869";
}
.icomoon-chat:before {
  content: "\e0b7";
}
.icomoon-palette:before {
  content: "\e40a";
}
.icomoon-dehaze:before {
  content: "\e3c7";
}
.icomoon-directions_run:before {
  content: "\e566";
}
.icomoon-directions_walk:before {
  content: "\e536";
}
.icomoon-sms_failed:before {
  content: "\e63f";
}
.icomoon-flash_on:before {
  content: "\e3e7";
}
.icomoon-question_answer:before {
  content: "\e8af";
}
.icomoon-my_location:before {
  content: "\e55c";
}
.icomoon-home:before {
  content: "\e88a";
}
.icomoon-import_contacts:before {
  content: "\e0e0";
}
.icomoon-room:before {
  content: "\e8b4";
}
.icomoon-menu:before {
  content: "\e5d2";
}
.icomoon-person_pin_circle:before {
  content: "\e56a";
}
.icomoon-security:before {
  content: "\e32a";
}
.icomoon-settings:before {
  content: "\e8b8";
}
.icomoon-thumb_down:before {
  content: "\e8db";
}
.icomoon-thumb_up:before {
  content: "\e8dc";
}
.icomoon-touch_app:before {
  content: "\e913";
}
.icomoon-tune:before {
  content: "\e429";
}
.icomoon-unfold_less:before {
  content: "\e5d6";
}
.icomoon-unfold_more:before {
  content: "\e5d7";
}
.icomoon-volume_off:before {
  content: "\e04f";
}
.icomoon-volume_up:before {
  content: "\e050";
}
.icomoon-language-choice:before {
  content: "\e624";
}
.icomoon-exit-fullscreen:before {
  content: "\e604";
}
.icomoon-enter-fullscreen:before {
  content: "\e605";
}
.icomoon-sword-spade:before {
  content: "\e900";
}
.icomoon-breastplate:before {
  content: "\e901";
}
.icomoon-spider-alt:before {
  content: "\e902";
}
.icomoon-locked-chest:before {
  content: "\e903";
}
.icomoon-enlightenment:before {
  content: "\e904";
}
.icomoon-cash:before {
  content: "\e905";
}
.icomoon-biceps:before {
  content: "\e906";
}
.icomoon-laurel-crown:before {
  content: "\e600";
}
.icomoon-death-note:before {
  content: "\e601";
}
.icomoon-conversation:before {
  content: "\e606";
}
.icomoon-crossed-swords:before {
  content: "\e607";
}
.icomoon-eagle-emblem:before {
  content: "\e620";
}
.icomoon-treasure-map:before {
  content: "\e621";
}
.icomoon-battle-gear:before {
  content: "\e622";
}
.icomoon-home3:before {
  content: "\e623";
}
.icomoon-music:before {
  content: "\e60e";
}
.icomoon-book:before {
  content: "\e62c";
}
.icomoon-qrcode:before {
  content: "\e602";
}
.icomoon-lifebuoy:before {
  content: "\e632";
}
.icomoon-envelop:before {
  content: "\e603";
}
.icomoon-box-add:before {
  content: "\e60d";
}
.icomoon-floppy-disk:before {
  content: "\e611";
}
.icomoon-undo2:before {
  content: "\e633";
}
.icomoon-bubbles4:before {
  content: "\e625";
}
.icomoon-user:before {
  content: "\e608";
}
.icomoon-users:before {
  content: "\e609";
}
.icomoon-user-plus:before {
  content: "\e60a";
}
.icomoon-user-minus:before {
  content: "\e60b";
}
.icomoon-spinner4:before {
  content: "\e60c";
}
.icomoon-spinner11:before {
  content: "\e616";
}
.icomoon-wrench:before {
  content: "\e635";
}
.icomoon-equalizer2:before {
  content: "\e60f";
}
.icomoon-cog:before {
  content: "\e610";
}
.icomoon-aid-kit:before {
  content: "\e617";
}
.icomoon-bug:before {
  content: "\e631";
}
.icomoon-stats-dots:before {
  content: "\e62e";
}
.icomoon-trophy:before {
  content: "\e626";
}
.icomoon-gift:before {
  content: "\e612";
}
.icomoon-fire:before {
  content: "\e636";
}
.icomoon-shield:before {
  content: "\e637";
}
.icomoon-power:before {
  content: "\e638";
}
.icomoon-switch:before {
  content: "\e619";
}
.icomoon-cloud-download:before {
  content: "\e613";
}
.icomoon-cloud-upload:before {
  content: "\e614";
}
.icomoon-cloud-check:before {
  content: "\e615";
}
.icomoon-download2:before {
  content: "\e627";
}
.icomoon-upload2:before {
  content: "\e628";
}
.icomoon-star-empty:before {
  content: "\e63d";
}
.icomoon-star-half:before {
  content: "\e63e";
}
.icomoon-star-full:before {
  content: "\e618";
}
.icomoon-point-up:before {
  content: "\e639";
}
.icomoon-point-right:before {
  content: "\e63a";
}
.icomoon-point-down:before {
  content: "\e63b";
}
.icomoon-point-left:before {
  content: "\e63c";
}
.icomoon-warning:before {
  content: "\e61c";
}
.icomoon-blocked:before {
  content: "\e61a";
}
.icomoon-cross:before {
  content: "\e629";
}
.icomoon-volume-high:before {
  content: "\e61d";
}
.icomoon-volume-low:before {
  content: "\e62a";
}
.icomoon-volume-mute2:before {
  content: "\e61e";
}
.icomoon-radio-checked:before {
  content: "\e907";
}
.icomoon-radio-unchecked:before {
  content: "\e908";
}
.icomoon-terminal:before {
  content: "\e61b";
}
.icomoon-facebook2:before {
  content: "\e62b";
}
.icomoon-twitter2:before {
  content: "\e62d";
}
.icomoon-github:before {
  content: "\e61f";
}
.icomoon-apple:before {
  content: "\e62f";
}
.icomoon-android:before {
  content: "\e630";
}
.icomoon-chrome:before {
  content: "\e634";
}

/* TODO mnemonic for scaled / unscaled */

/* vars */
:root {
	--omr⋄ui__scale: .8;

	--omr⋄ui__immersion-view--z-index: 100;
	--omr⋄ui__meta-view--z-index: 1000;

	/******* Base *******/

	--omr⋄ui__border--width_: 3px;
	--omr⋄ui__padding_: 6px;

	--omr⋄ui__hamburger--shape-diameter_: 69px;
	--omr⋄ui__hamburger--visible-ratio: 0.725;

	--omr⋄ui__logo--shape-height_: calc(var(--omr⋄ui__hamburger--shape-diameter_) * .8);
	--omr⋄ui__logo--visible-ratio: 0.8;
	--omr⋄ui__logo-content--width_: auto; /* Should be refined by the user */

	--omr⋄ui__universe-anchor-content--width_: auto; /* Should be refined by the user */

	--omr⋄ui__bottom-menu--shape-height_: 80px;
	--omr⋄ui__bottom-menu--visible-ratio: 0.63;

	--omr⋄ui__meta--shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
	--omr⋄ui__universe--shadow: 0 0 2px rgba(0,0,0,.14), 0 2px 4px rgba(0,0,0,.28);

	/******* intermediate ********/

	--omr⋄ui__hamburger--visible-width_: calc(
		var(--omr⋄ui__hamburger--shape-diameter_)
		* var(--omr⋄ui__hamburger--visible-ratio)
	);
	--omr⋄ui__hamburger--visible-heigth_: var(--omr⋄ui__hamburger--visible-width_);

	--omr⋄ui__logo--visible-width_: calc(
		var(--omr⋄ui__hamburger--visible-width_)
		+ var(--omr⋄ui__logo-content--width_)
		+ 2 * var(--omr⋄ui__border--width_)
		+ 2 * var(--omr⋄ui__padding_)
	);
	--omr⋄ui__logo--visible-height_: calc(
		var(--omr⋄ui__logo--shape-height_)
		* var(--omr⋄ui__logo--visible-ratio)
	);

	--omr⋄ui__universe-anchor--visible-width_: calc(
		var(--omr⋄ui__logo--visible-width_)
		+ var(--omr⋄ui__universe-anchor-content--width_)
		+ 2 * var(--omr⋄ui__padding_)
	);
	/* TODO fix (too small) */
	--omr⋄ui__universe-anchor--visible-height_: calc((
			var(--omr⋄ui__logo--visible-height_)
			- var(--omr⋄ui__border--width_)
		)
	);

	--omr⋄ui__bottom-menu--height_: calc(
		var(--omr⋄ui__bottom-menu--shape-height_)
		* var(--omr⋄ui__bottom-menu--visible-ratio)
	);
}

/*********************/

.omr⋄plane⁚immersion {
	z-index: var(--omr⋄ui__immersion-view--z-index);
}

.omr⋄plane⁚meta {
	z-index: var(--omr⋄ui__meta-view--z-index);
}

/*********************/


/*
.omr⋄hud {
 position: absolute; /* prevent from taking room */
	/*display: flex;
	flex-direction: row;
}
.omr⋄hud a {
	/* usually what we want in HUD elements */
	/*text-decoration: none;
	color: inherit;
}
*/


.omr⋄hamburger {
	--scale: var(--omr⋄ui__hamburger--scale, var(--omr⋄ui__scale));
	--diameter: calc(var(--omr⋄ui__hamburger--shape-diameter_) * var(--scale));
	--visible-ratio: var(--omr⋄ui__hamburger--visible-ratio);

	z-index: calc(50 + var(--omr⋄ui__meta-view--z-index));
	box-shadow: var(--omr⋄ui__meta--shadow);
	cursor: pointer;

	/* circle shape
	 * https://css-tricks.com/examples/ShapesOfCSS/
	 */
	width: var(--diameter);
	height: var(--diameter);
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;

	background-color: var(--o⋄color⁚bg--main);
	color: var(--o⋄color⁚fg--main);
	border: solid calc(var(--omr⋄ui__border--width_) * var(--scale)) var(--o⋄color⁚fg--main);

	font-size: calc(33px * var(--scale));

	position: fixed;
	top: calc(var(--diameter) * (1 - var(--visible-ratio)) * -1);
	left: calc(var(--diameter) * (1 - var(--visible-ratio)) * -1);
}
.omr⋄hamburger:hover {
	--omr⋄ui__hamburger--scale: calc(var(--omr⋄ui__scale) * 1.05);
}
.omr⋄hamburger > span {
	position: fixed;
	top: calc(5px * var(--scale));
	left: calc(5px * var(--scale));
}

.omr⋄logo {
	--scale: var(--omr⋄ui__logo--scale, var(--omr⋄ui__scale));
	--padding: calc(var(--omr⋄ui__padding_) * var(--scale));
	--visible-ratio: var(--omr⋄ui__logo--visible-ratio);
	--height: calc(var(--omr⋄ui__logo--shape-height_) * var(--scale));
	--position-shift: calc(var(--height) * (1 - var(--visible-ratio)));
	--width: calc(
		var(--position-shift) + (
			var(--omr⋄ui__border--width_)
			+ var(--omr⋄ui__hamburger--visible-width_)
			+ var(--omr⋄ui__logo-content--width_)
			+ var(--omr⋄ui__border--width_)
		) * var(--scale)
		+ 2 * var(--padding)
	);

	/* handle strange content */
	overflow-x: hidden;
	overflow-y: hidden;

	z-index: calc(40 + var(--omr⋄ui__meta-view--z-index));
	box-shadow: var(--omr⋄ui__meta--shadow);
	cursor: pointer;

	/* TV shape (half)
	 * https://css-tricks.com/examples/ShapesOfCSS/
	 */
	height: var(--height);
	width: var(--width);

	background-color: var(--o⋄color⁚bg--main);
	color: var(--o⋄color⁚fg--main);
	border: solid calc(var(--omr⋄ui__border--width_) * var(--scale)) var(--o⋄color⁚fg--main);
	border-radius: calc(18px * var(--scale)) / calc(60px * var(--scale));

	position: fixed;
	top: calc(var(--position-shift) * -1);
	left: calc(var(--position-shift) * -1);

	padding-top: calc(
		var(--position-shift)
		- var(--omr⋄ui__border--width_) * var(--scale)
		+ var(--padding)
	);
	padding-left: calc(
		var(--position-shift) + (
			var(--omr⋄ui__hamburger--visible-width_)
			- var(--omr⋄ui__border--width_)
		) * var(--scale)
		+ var(--padding)
	);
	padding-right: var(--padding);
	padding-bottom: var(--padding);

	/* Help center content */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.omr⋄logo:hover {
	--omr⋄ui__logo--scale: calc(var(--omr⋄ui__scale) * 1.01);
}
.omr⋄logo > * {
	/* Help center content */
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 100%;
}

.omr⋄universe-anchor {
	--scale-base: var(--omr⋄ui__scale);
	--scale-hoverable: var(--omr⋄ui__universe-anchor--scale, var(--omr⋄ui__scale));
	--visible-ratio: var(--omr⋄ui__logo--visible-ratio);
	--padding: calc(var(--omr⋄ui__universe-anchor--padding_, var(--omr⋄ui__padding_)) * var(--scale-base));

	--height: calc((var(--omr⋄ui__logo--shape-height_) - 2 * var(--omr⋄ui__border--width_)) * var(--scale-base));
	--position-shift: calc(var(--height) * (1 - var(--visible-ratio)));
	--width: calc(
		var(--position-shift) + (
			var(--omr⋄ui__logo--visible-width_)
			+ var(--omr⋄ui__universe-anchor-content--width_)
		) * var(--scale-base)
		+ 2 * var(--padding)
	);

	/* handle strange content */
	overflow-x: hidden;
	overflow-y: hidden;

	z-index: calc(30 + var(--omr⋄ui__immersion-view--z-index));
	cursor: pointer;
	box-shadow: var(--omr⋄ui__universe--shadow);

	/* TV shape (half)
	 * https://css-tricks.com/examples/ShapesOfCSS/
	 */
	width: var(--width);
	height: var(--height);
	/*max-height: var(--height);*/
	border-radius: calc(5px * var(--scale-base)) / calc(30px * var(--scale-base));

	background-color: var(--o⋄color⁚bg--main--backdrop);
	color: var(--o⋄color⁚fg--main);
	border: none;

	position: fixed;
	top: calc(
		var(--position-shift) * -1
			/* hack for hover effect */
		+ (var(--scale-hoverable) - var(--scale-base)) * 50px
	);
	left: calc(
		var(--position-shift) * -1
		/* hack for hover effect */
		+ (var(--scale-hoverable) - var(--scale-base)) * 50px
	);

	padding-top: calc(
		var(--position-shift)
		+ var(--padding)
	);
	padding-left: calc(
		var(--position-shift) + (
			var(--omr⋄ui__logo--visible-width_)
		) * var(--scale-base)
		+ var(--padding)
	);
	padding-right: var(--padding);
	padding-bottom: var(--padding);
}
.omr⋄universe-anchor:hover {
	--omr⋄ui__universe-anchor--scale: calc(var(--omr⋄ui__scale) * 1.02);
}
.omr⋄universe-anchor > * {
	/* Help center content */
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 100%;
}

.omr⋄bottom-menu {
	--scale: var(--omr⋄ui__scale);
	--icon-width_: 34px;
	--icon-margin: calc(8px * var(--scale));
	--height: calc((var(--omr⋄ui__bottom-menu--shape-height_) - var(--omr⋄ui__border--width_)) * var(--scale));
	--visible-ratio: var(--omr⋄ui__bottom-menu--visible-ratio);
	--padding: calc(var(--omr⋄ui__padding_) * var(--scale));

	z-index: calc(var(--omr⋄ui__meta-view--z-index) - 10);

	/* TV shape (half)
	 * https://css-tricks.com/examples/ShapesOfCSS/
	 */
	height: var(--height);
	max-height: var(--height);
	border-radius: calc(18px * var(--scale)) / calc(60px * var(--scale));

	color: var(--o⋄color⁚fg--main);
	border: solid calc(1px * var(--scale)) var(--o⋄color⁚fg--main);
	background-color: var(--o⋄color⁚bg--main--backdrop);
/*	background-color: var(--o⋄color⁚bg--main--translucent);*/

	position: fixed;
	--position-shift: calc(var(--height) * (1 - var(--visible-ratio)));
	bottom: calc(var(--position-shift) * -1);
	right: calc(var(--position-shift) * -1);

	padding-bottom: calc(var(--position-shift));
	padding-right: calc(var(--position-shift));
	padding-left: calc(3px * var(--scale));

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.omr⋄bottom-menu⁚icon {
	/* Help center content */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	/* width: clamp to max size to avoid strange behaviour on zoom */
	width: calc(var(--icon-width_) * var(--scale));
	font-size: calc((var(--icon-width_) - 2px) * var(--scale));
	line-height: calc((var(--icon-width_) - 0px) * var(--scale));
	text-align: center;
	/**/
	margin: 0 var(--icon-margin);
	cursor: pointer;
}
.omr⋄bottom-menu⁚icon:hover {
	font-size: calc(var(--icon-width_) * 1.1 * var(--scale));
	text-shadow: 0 0 calc(22px * var(--scale)) var(--o⋄color⁚fg--main);
}
.omr⋄bottom-menu--selected-indicator {
	--height: calc(3px * var(--scale));
	--width: calc(var(--icon-width_) * var(--scale) + var(--icon-margin));

	--reverse-index: var(--omr⋄ui__bottom-menu--selected-reverse-index, 0);

	position: fixed;
	bottom: var(--height);
	right: calc(var(--reverse-index) * -1 * (var(--width) + var(--icon-margin)) + var(--icon-margin) * .5);

	height: var(--height);
	width: var(--width);
	background-color: var(--o⋄color⁚fg--main);
}

/************/

.omr⋄content-area {
	--hud__top--height: calc(var(--omr⋄ui__hamburger--visible-heigth_) * var(--omr⋄ui__scale));
	--hud__bottom--height: calc(var(--omr⋄ui__bottom-menu--height_) * var(--omr⋄ui__scale));

	display: flex;
	flex-direction: column;

	/* no, it pushes the content and sometimes we don't want that
	 * ex. background

	padding-top: var(--hud--top__height);
	padding-bottom: var(--hud--bottom__height);
	*/
}
/*.omr⋄content-area:before {
	content: ' ';
	height: calc(var(--omr⋄ui__hamburger--visible-heigth_) * var(--omr⋄ui__scale));
	flex: none;
}
.omr⋄content-area:after {
	content: ' ';
	height: calc(var(--omr⋄ui__bottom-menu--height_) * var(--omr⋄ui__scale));
	flex: none;
}*/

/************/

/* special usage when needing to hide the extra hud parts */
.omr⋄hud⁚shifts-hider {
	position: fixed;
	top: 0;
	left: 0;
	z-index: calc(100 + var(--omr⋄ui__meta-view--z-index));

	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;

	pointer-events: none;
	background-color: transparent;
	outline: calc(var(--omr⋄ui__scale) * 30px) solid var(--o⋄color⁚bg--main);
}



/*! @tbrpg/ui--browser--css | Unlicense | github.com/Offirmo/offirmo-monorepo/tree/master/9-oh-my-rpg/view-browser */

#meta-panel, .bm-menu-wrap {
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--o⋄color⁚bg--main--backdrop);
	border-right: solid 2px;
}

/* https://stackoverflow.com/a/37600130/587407 */
/* big screens */
#meta-panel {
	width: 400px;
}
/* small screens */
@media screen and (max-width: 400px) {
	#meta-panel {
		width: 95%;
	}
}

.about-logo {
	width: 100%;
	max-width: 300px;
}

/* parameters we can't compute automatically */
:root {
	--omr⋄ui__universe-anchor--padding_: 3px;
}

.status⁚avatar--details {
	line-height: 12px;
	font-size: 12px;
}

.status⁚avatar--klass {
	text-transform: capitalize;
}

/* TODO clean
.status⁚energy {
	position: relative;
	margin: 0 4px;
	display: flex;
	width: 22px;
	height: 22px;
}

.status⁚energy__content {
	position: absolute;
	top: 6px;
	left: 5px;
	font-size: 12px;
	line-height: 12px;
}

.status⁚energy .CircularProgressbar-path       { stroke: var(--o⋄color⁚fg--main); }
.status⁚energy .CircularProgressbar-trail      { stroke: var(--o⋄color⁚co212__brown); }
.status⁚energy .CircularProgressbar-text       { fill: orange; }
.status⁚energy .CircularProgressbar-background { fill: green; }
*/

/* Global considerations for Rich Text display:
 * - must be "terminal-like", since it's supposed to be displayed the same on a console
 * - has only 1 main direction
 *
 */

.o⋄rich-text {
	display: contents;
}

.o⋄rich-text div.o⋄rich-text⁚inline {
	display: inline;
}

/* nicer lists: copied from @offirmo-private/ui--browser--css
 */
.o⋄rich-text ol,
.o⋄rich-text ul {
	padding-inline-start: 1.5em;
}
/*.o⋄rich-text li > ul,
.o⋄rich-text li > ol {
	padding-inline-start: 0;
	padding-left: 0;
}*/

ol.o⋄rich-text⋄list--no-bullet,
ul.o⋄rich-text⋄list--no-bullet {
	list-style-type: none;
	/* still keep some padding start */
}
ol.o⋄rich-text⋄list--interactive,
ul.o⋄rich-text⋄list--interactive {
	list-style-type: none;
	padding-inline-start: 0;
}

button.o⋄rich-text⋄interactive {
	/* see o⋄button--inline first */
}

.o⋄rich-text⋄list--interactive button.o⋄rich-text⋄interactive {
	padding: .3em;
	height: 3em;
	width: 99%;
	text-align: left;
}

/* only for react render */
.ToolTipPortal {
	z-index: 999;
}


.monster-emoji {
	font-size: xx-large;
}

.tbrpg-element {
}

.item__name,
.avatar__name,
.avatar__class,
.monster__name {
	font-weight: bold;
}


.item--quality--common {
	color: var(--o⋄color⁚quality--common);
}
.item--quality--uncommon {
	color: var(--o⋄color⁚quality--uncommon);
}
.item--quality--rare {
	color: var(--o⋄color⁚quality--rare);
}
.item--quality--epic {
	color: var(--o⋄color⁚quality--epic);
}
.item--quality--legendary {
	color: var(--o⋄color⁚quality--legendary);
}
.item--quality--artifact {
	color: var(--o⋄color⁚quality--artifact);
}
.item--quality--admin {
	color: #ff3c3a; /* TODO check if used */
}

.achievement__lore {
	font-style: italic;
}

.monster--rank--common {
}
.monster--rank--elite {
	color: var(--o⋄color⁚fg--warning)
}
.monster--rank--boss {
	color: var(--o⋄color⁚fg--error);
}


.item--weapon:before {
	content: '⚔ ';
}
.item--armor:before {
	content: '🛡 ';
}

.currency--coin:before, .value--coin:before {
	content: '💰';
}
.currency--token:before, .value--token:before {
	content: '💠';
}

.comparison--better {
	color: var(--o⋄color⁚fg--success);
}
.comparison--worse {
	color: var(--o⋄color⁚fg--error);
}
.comparison--equal {
	/* TODO not used */
}

.auto-scroll-down {
	height: 100%;
	overflow-x: hidden; /* prevent jankiness when y scrollbar appears */
}


.chat {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 5px;
}

.chat__element {
	margin: 3px 0;
	padding: 0;
	position: relative; /* to allow absolute positioning of content */
	max-width: 80%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;

	border-radius: .4em;
}
.chat__element--ltr {
	align-self: flex-start;
}
.chat__element--rtl {
	align-self: flex-end;
}

.chat__bubble,
.chat__choices button {
	padding: .5em .8em .4em;
	width: fit-content;
	/* background only here since we don't want bg between buttons */
	background-color: var(--o⋄color⁚bg--main--backdrop);
}
/* redefine active and hover since we altered the bg */
.chat__choices button:hover {
	background-color: rgba(33%, 33%, 33%, .9);
}
/*
.chat__choices button:active {
	background-color: var(--o⋄color⁚bg--highlight--2);
}*/

.chat__spinner {
	background-image: url("Spinner-1s-42px.eb8b483e.svg");
	background-repeat: no-repeat;
	background-position: 10px 0;
	height: 42px;
}

.chat__choices {
	text-align: end;
	justify-content: flex-end;
}

.chat__input {
	height: 26px;
	border: solid 1px #00000038;
	margin-right: 2px;
}

.chat__progress {

}


.tbrpg-panel {
	margin: .5em .8em .4em;
	margin-top: calc(var(--hud__top--height) + 5px);
	margin-bottom: calc(var(--hud__bottom--height) + 5px);
}

.tbrpg-panel--explore {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 90px;
}


.tbrpg-panel--character .panel-top-content {
	padding: .5em .8em .4em;
	border-radius: .4em;
}


.tbrpg-panel--inventory {

}

.tbrpg-panel--inventory  .item__name {
	font-weight: normal;
}

.tbrpg-panel--inventory .panel-top-content {
	padding: .5em .8em .4em;
	border-radius: .4em;
}


.tbrpg-panel--achievements .panel-top-content {
	padding: .5em .8em .4em;
	border-radius: .4em;
}


.tbrpg-panel--achievements .panel-top-content {
	padding: .5em .8em .4em;
	border-radius: .4em;
}

/* XXX AUTO-GENERATED from ad hoc command line tool */

.tbrpg⋄bg-image⁚ahmed_maihope-forgotten_temple {
	background-image: url('ahmed-maihope-forgotten-temple.bcdd27ad.jpg');
	background-position: 19% 50%;
}


.tbrpg⋄bg-image⁚ahmed_maihope-space_station {
	background-image: url('ahmed-maihope-space-station.72446de8.jpg');
	background-position: 50% 99%;
}


.tbrpg⋄bg-image⁚ahmed_maihope-the_apple_thief {
	background-image: url('ahmed-maihope-the-apple-thief.a88c61ed.jpg');
	background-position: 26% 50%;
}


.tbrpg⋄bg-image⁚albert_weand-adventurers {
	background-image: url('adventurers.08a4dd0a.jpg');
	background-position: 38% 99%;
}


.tbrpg⋄bg-image⁚andreas_rocha-ar_nat_village {
	background-image: url('andreas-rocha-ar-nat-village.85c4c387.jpg');
	background-position: 79% 20%;
}


.tbrpg⋄bg-image⁚andreas_rocha-at_the_gate {
	background-image: url('andreas-rocha-at-the-gate.bd68e95e.jpg');
	background-position: 85% 62%;
}


.tbrpg⋄bg-image⁚andreas_rocha-blue_valley {
	background-image: url('andreas-rocha-blue-valley.c18e9699.jpg');
	background-position: 74% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-castlerock {
	background-image: url('andreas-rocha-castlerock.f437356b.jpg');
	background-position: 32% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-city_gates {
	background-image: url('andreas-rocha-city-gates.fd5f8049.jpg');
	background-position: 63% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-cold_march {
	background-image: url('andreas_rocha-Cold_March.ca1ee6c2.jpg');
	background-position: 26% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-dangerous_roads {
	background-image: url('andreas-rocha-dangerous_roads.9eac2214.jpg');
	background-position: 64% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-dark_times {
	background-image: url('andreas-rocha-dark_times.543b7cbc.jpg');
	background-position: 78% 60%;
}


.tbrpg⋄bg-image⁚andreas_rocha-deep_in_the_jungle {
	background-image: url('andreas-rocha-deep_in_the_jungle.3d3feba8.jpg');
	background-position: 65% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-deep_in_the_woods {
	background-image: url('andreas-rocha-deep_in_the_woods.7cc92208.jpg');
	background-position: 30% 80%;
}


.tbrpg⋄bg-image⁚andreas_rocha-deep_shadows {
	background-image: url('andreas-rocha-deep_shadows.cee325ad.jpg');
	background-position: 23% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-dome_city {
	background-image: url('andreas-rocha-dome_city.b752eeda.jpg');
	background-position: 19% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-dragons_pass {
	background-image: url('andreas-rocha-dragons_pass.3ca39637.jpg');
	background-position: 0% 27%;
}


.tbrpg⋄bg-image⁚andreas_rocha-enchanted_forest_ii {
	background-image: url('andreas-rocha-enchanted_forest_ii.3e8be6cb.jpg');
	background-position: 66% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-fields_of_gold {
	background-image: url('fields_of_gold-andreas_rocha.3d80fe28.jpg');
	background-position: 63% 70%;
}


.tbrpg⋄bg-image⁚andreas_rocha-fiery_path {
	background-image: url('andreas-rocha-fiery_path.2b18abfd.jpg');
	background-position: 78% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-first_rays {
	background-image: url('andreas-rocha-first_rays.54659140.jpg');
	background-position: 41% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-forbidden_kingdom {
	background-image: url('andreas-rocha-forbidden_kingdom.2cb3951a.jpg');
	background-position: 26% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-foundation {
	background-image: url('andreas-rocha-foundation.f81362f6.jpg');
	background-position: 50% 46%;
}


.tbrpg⋄bg-image⁚andreas_rocha-hidden_treasures {
	background-image: url('andreas-rocha-hidden_treasures.70ecf035.jpg');
	background-position: 73% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-homage_to_sintra {
	background-image: url('andreas-rocha-homage_to_sintra.7f7903fa.jpg');
	background-position: 75% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-humble_abode {
	background-image: url('andreas-rocha-humble_abode.b4049aef.jpg');
	background-position: 50% 72%;
}


.tbrpg⋄bg-image⁚andreas_rocha-ice_temple {
	background-image: url('andreas-rocha-ice_temple.48adbbe9.jpg');
	background-position: 78% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-light_forest {
	background-image: url('andreas-rocha-light_forest.6bfad1cb.jpg');
	background-position: 72% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-magic_hour {
	background-image: url('andreas-rocha-magic_hour.499aae3e.jpg');
	background-position: 81% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-morning_arrival {
	background-image: url('andreas_rocha-Morning_Arrival.3d1d070d.jpg');
	background-position: 49% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-mountain_pass {
	background-image: url('andreas-rocha-mountain_pass.60b760e5.jpg');
	background-position: 96% 80%;
}


.tbrpg⋄bg-image⁚andreas_rocha-old_forest {
	background-image: url('andreas-rocha-old_forest.856b3c25.jpg');
	background-position: 61% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-path_of_wisdom {
	background-image: url('andreas-rocha-path_of_wisdom.11f6b648.jpg');
	background-position: 65% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-peace_of_mind {
	background-image: url('andreas-rocha-peace_of_mind.18a467d5.jpg');
	background-position: 45% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-safe_haven {
	background-image: url('andreas-rocha-safe_haven.61cded73.jpg');
	background-position: 80% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-soul_searching {
	background-image: url('andreas-rocha-soul_searching.9a8781ec.jpg');
	background-position: 57% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-spring_is_coming {
	background-image: url('andreas-rocha-spring_is_coming.d00e1163.jpg');
	background-position: 68% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-student_vs_teacher {
	background-image: url('andreas-rocha-student_vs_teacher.40820766.jpg');
	background-position: 45% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_citadel_ii {
	background-image: url('andreas-rocha-the_citadel_ii.d94a0c87.jpg');
	background-position: 98% 25%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_dark_citadel {
	background-image: url('andreas-rocha-the_dark_citadel.e39aa1f8.jpg');
	background-position: 60% 51%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_emissary {
	background-image: url('andreas-rocha-the_emissary.e38d2b8c.jpg');
	background-position: 31% 65%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_fiery_forest {
	background-image: url('andreas-rocha-the_fiery_forest.d0807d7a.jpg');
	background-position: 84% 1%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_gathering {
	background-image: url('andreas-rocha-the_gathering.4db9ef15.jpg');
	background-position: 51% 99%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_hidden_village_ii {
	background-image: url('andreas-rocha-the_hidden_village_ii.9fa28656.jpg');
	background-position: 67% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_last_fortress {
	background-image: url('andreas-rocha-the_last_fortress.4d31752f.jpg');
	background-position: 66% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_message {
	background-image: url('andreas-rocha-the_message.bb5b4e8d.jpg');
	background-position: 91% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-the_treehouse {
	background-image: url('andreas-rocha-the_treehouse.b1bac645.jpg');
	background-position: 75% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-unnamed_2 {
	background-image: url('andreas-rocha-unnamed_2.55d85592.jpg');
	background-position: 63% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-warm_mist {
	background-image: url('andreas-rocha-warm_mist.c0d6db38.jpg');
	background-position: 24% 71%;
}


.tbrpg⋄bg-image⁚andreas_rocha-waterfall_memories {
	background-image: url('andreas-rocha-waterfall_memories.19b4f65d.jpg');
	background-position: 64% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-we_found_this_amazing_place {
	background-image: url('andreas-rocha-we_found_this_amazing_place.f082529b.jpg');
	background-position: 60% 90%;
}


.tbrpg⋄bg-image⁚andreas_rocha-winter_lights {
	background-image: url('andreas-rocha-winter_lights.56301c35.jpg');
	background-position: 74% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-winter_travellers {
	background-image: url('andreas-rocha-winter_travellers.63db4076.jpg');
	background-position: 55% 50%;
}


.tbrpg⋄bg-image⁚andreas_rocha-wizards_tower {
	background-image: url('andreas-rocha-wizards_tower.c5841e12.jpg');
	background-position: 18% 1%;
}


.tbrpg⋄bg-image⁚cyril_labranche-pikes {
	background-image: url('cyril-labranche-pikes.a8210d4d.jpg');
	background-position: 80% 60%;
}


.tbrpg⋄bg-image⁚dan_zhao-a_cabin_in_the_cave {
	background-image: url('a_cabin_in_the_cave-dan_zhao.90330273.jpg');
	background-position: 57% 50%;
}


.tbrpg⋄bg-image⁚dan_zhao-a_practice {
	background-image: url('a_practice-dan_zhao.f79128e4.jpg');
	background-position: 66% 50%;
}


.tbrpg⋄bg-image⁚dan_zhao-ancient_castle {
	background-image: url('ancient_castle-dan_zhao.9ecc1e2d.jpg');
	background-position: 34% 50%;
}


.tbrpg⋄bg-image⁚dan_zhao-barbacan {
	background-image: url('barbacan-dan_zhao.f22d5aae.jpg');
	background-position: 39% 50%;
}


.tbrpg⋄bg-image⁚dan_zhao-canyon {
	background-image: url('canyon-dan_zhao.46a09d57.jpg');
	background-position: 26% 50%;
}


.tbrpg⋄bg-image⁚dan_zhao-secluded_valley {
	background-image: url('secluded_valley-dan_zhao.25d1dfcc.jpg');
	background-position: 75% 50%;
}


.tbrpg⋄bg-image⁚daniel_alekow-albion_lymhurst {
	background-image: url('daniel-alekow-albion-lymhurst.0f0cdfb9.jpg');
	background-position: 37% 50%;
}


.tbrpg⋄bg-image⁚daniel_alekow-inside_caerleon {
	background-image: url('daniel-alekow-inside-caerleon.bb5b0de8.jpg');
	background-position: 48% 50%;
}


.tbrpg⋄bg-image⁚digital_moons-forest_blue {
	background-image: url('forest--blue.00c73a8c.png');
	background-position: 33% 10%;
}


.tbrpg⋄bg-image⁚dmitry_kremiansky-a_secret_place_alps {
	background-image: url('dmitry-kremiansky-a_secret_place_alps.8b158240.jpg');
	background-position: 47% 30%;
}


.tbrpg⋄bg-image⁚dmitry_kremiansky-ships_and_seagulls {
	background-image: url('dmitry-kremiansky-ships_and_seagulls.f5edf6a7.jpg');
	background-position: 52% 50%;
}


.tbrpg⋄bg-image⁚dmitry_kremiansky-thames {
	background-image: url('dmitry-kremiansky-thames.4e30dae6.jpg');
	background-position: 74% 50%;
}


.tbrpg⋄bg-image⁚dmitry_kremiansky-victorian_street {
	background-image: url('dmitry-kremiansky-victorian-street.d8434639.jpg');
	background-position: 79% 50%;
}


.tbrpg⋄bg-image⁚g_xy-cloud_city {
	background-image: url('g-xy-cloud_city.ea9adeb2.jpg');
	background-position: 31% 90%;
}


.tbrpg⋄bg-image⁚g_xy-fog_city {
	background-image: url('g-xy-fog_city.08b5dbf6.jpg');
	background-position: 39% 75%;
}


.tbrpg⋄bg-image⁚g_xy-out_of_control {
	background-image: url('g-xy-out-of-control.99e021df.jpg');
	background-position: 90% 54%;
}


.tbrpg⋄bg-image⁚g_xy-shuwu {
	background-image: url('g-xy-shuwu.bf3883b2.jpg');
	background-position: 40% 90%;
}


.tbrpg⋄bg-image⁚il_su_ko-old_concept_draft_canceled {
	background-image: url('il-su-ko-Old-concept-draft-canceled.94df61f5.jpg');
	background-position: 21% 50%;
}


.tbrpg⋄bg-image⁚ivan_laliashvili-the_return {
	background-image: url('ivan-laliashvili-the_return.8d125fe7.jpg');
	background-position: 56% 5%;
}


.tbrpg⋄bg-image⁚ivan_laliashvili-the_return_building_a_castle {
	background-image: url('Ivan-Laliashvili-the_return_building_a_castle.90ff2da7.jpg');
	background-position: 46% 99%;
}


.tbrpg⋄bg-image⁚jaecheol_park-bank {
	background-image: url('bank.5b7067fa.jpg');
	background-position: 70% 70%;
}


.tbrpg⋄bg-image⁚jaecheol_park-bl_f {
	background-image: url('bl-f.f2226685.jpg');
	background-position: 90% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-castle {
	background-image: url('castle.fa7fdbd1.jpg');
	background-position: 31% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-cave_waterfall {
	background-image: url('cave-waterfall.baa8caee.jpg');
	background-position: 20% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-city_sea {
	background-image: url('city-sea.d5c1a8bd.jpg');
	background-position: 40% 29%;
}


.tbrpg⋄bg-image⁚jaecheol_park-forest_b_r {
	background-image: url('forest-b-r.b048e697.jpg');
	background-position: 31% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-forest_gr_up {
	background-image: url('forest-gr-up.a40ef545.jpg');
	background-position: 37% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-forest_m_t {
	background-image: url('forest-m-t.7f50f390.jpg');
	background-position: 57% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-forest_night_waterfall {
	background-image: url('forest-night-waterfall.c2ef3db0.jpg');
	background-position: 45% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-forest_waterfall {
	background-image: url('forest-waterfall.dfee72f0.jpg');
	background-position: 39% 1%;
}


.tbrpg⋄bg-image⁚jaecheol_park-sea_r_w {
	background-image: url('sea-r-w.1f006df0.jpg');
	background-position: 19% 50%;
}


.tbrpg⋄bg-image⁚jaecheol_park-shop {
	background-image: url('shop.f90cbea6.jpg');
	background-position: 10% 28%;
}


.tbrpg⋄bg-image⁚jorge_miguel_jacinto-civilization {
	background-image: url('civilization.0c72e3a2.jpg');
	background-position: 41% 50%;
}


.tbrpg⋄bg-image⁚jorge_miguel_jacinto-half_remembered_ruins {
	background-image: url('half_remembered_ruins.82bbe0bb.jpg');
	background-position: 60% 50%;
}


.tbrpg⋄bg-image⁚julius_camenzind-snowcapped_environment {
	background-image: url('snowcapped_environment-julius_camenzind.7ceb4f58.jpg');
	background-position: 74% 50%;
}


.tbrpg⋄bg-image⁚lisadikaprio-sunny {
	background-image: url('sunny.00bfa1b1.png');
	background-position: 30% 70%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-gnomon {
	background-image: url('gnomon-raphael_lacoste.f097b706.jpg');
	background-position: 32% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-journey_to_the_center_of_the_earth {
	background-image: url('journey_to_the_center_of_the_earth-raphael_lacoste.661012d4.jpg');
	background-position: 55% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-jungle {
	background-image: url('jungle-raphael_lacoste.7990f9b8.jpg');
	background-position: 15% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-kvaslr_fortress {
	background-image: url('kvaslr_fortress-raphael_lacoste.02cbba15.jpg');
	background-position: 84% 1%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-lost_island {
	background-image: url('lost_island-raphael_lacoste.6fd64234.jpg');
	background-position: 2% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-path_to_the_gothic_choir {
	background-image: url('path_to_the_gothic_choir-raphael_lacoste.4f0d8b55.jpg');
	background-position: 30% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-return_of_the_knight {
	background-image: url('return_of_the_knight-raphael_lacoste.efcd0da7.jpg');
	background-position: 79% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-ride_at_dusk {
	background-image: url('ride_at_dusk-raphael_lacoste.2a5c2654.jpg');
	background-position: 60% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-santa_lucia_arrival {
	background-image: url('santa_lucia_arrival-raphael_lacoste.ff43a909.jpg');
	background-position: 20% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-sentinels {
	background-image: url('raphael-lacoste-sentinels.76727229.jpg');
	background-position: 90% 10%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-terry_goodkind_french_cover {
	background-image: url('Terry_Goodkind_French_Cover-raphael_lacoste.15276973.jpg');
	background-position: 5% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-the_coast {
	background-image: url('the_coast-raphael_lacoste.111e2c52.jpg');
	background-position: 100% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-the_encounter {
	background-image: url('the_encounter-raphael_lacoste.79686746.jpg');
	background-position: 1% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-the_journey {
	background-image: url('the_journey-raphael_lacoste.5cdb9ad5.jpg');
	background-position: 70% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-the_mangrove {
	background-image: url('the_mangrove-raphael_lacoste.26c0962d.jpg');
	background-position: 95% 50%;
}


.tbrpg⋄bg-image⁚raphael_lacoste-viking_ambush {
	background-image: url('viking_ambush-raphael_lacoste.54afbb9d.jpg');
	background-position: 25% 50%;
}


.tbrpg⋄bg-image⁚robh_ruppel-tangled_castle {
	background-image: url('robh_ruppel-tangled_castle.37cbe583.jpg');
	background-position: 45% 50%;
}


.tbrpg⋄bg-image⁚soma-dragons_lair {
	background-image: url('soma-dragons-lair.0469ef00.jpg');
	background-position: 43% 10%;
}


.tbrpg⋄bg-image⁚soma-dreamscape_practice_1 {
	background-image: url('soma-dreamscape_practice_1.d8e3491a.jpg');
	background-position: 24% 10%;
}


.tbrpg⋄bg-image⁚soma-dreamscape_practice_2 {
	background-image: url('soma-dreamscape_practice_2.af3fc6d4.jpg');
	background-position: 70% 21%;
}


.tbrpg⋄bg-image⁚soma-durur_mountain {
	background-image: url('soma-durur_mountain.4bc497ce.jpg');
	background-position: 35% 40%;
}


.tbrpg⋄bg-image⁚soma-encounter {
	background-image: url('soma-encounter.9510dec9.jpg');
	background-position: 20% 10%;
}


.tbrpg⋄bg-image⁚soma-entrance {
	background-image: url('soma-entrance.8309deb3.jpg');
	background-position: 68% 50%;
}


.tbrpg⋄bg-image⁚soma-fire_clouds {
	background-image: url('soma-fire_clouds.fcc3f458.jpg');
	background-position: 60% 10%;
}


.tbrpg⋄bg-image⁚soma-mirath_towers {
	background-image: url('soma-mirath_towers.d66fa169.jpg');
	background-position: 73% 50%;
}


.tbrpg⋄bg-image⁚soma-mountain_valley {
	background-image: url('soma-mountain_valley.a81ce324.jpg');
	background-position: 24% 80%;
}


.tbrpg⋄bg-image⁚soma-on_a_journey_2 {
	background-image: url('soma-on_a_journey_2.58e0278e.jpg');
	background-position: 24% 30%;
}


.tbrpg⋄bg-image⁚soma-red_dragon {
	background-image: url('soma-red-dragon.890327db.jpg');
	background-position: 41% 1%;
}


.tbrpg⋄bg-image⁚soma-taoro_landscape {
	background-image: url('soma-taoro_landscape.c901d7b1.jpg');
	background-position: 49% 20%;
}


.tbrpg⋄bg-image⁚soma-temple_ruins {
	background-image: url('soma-temple_ruins.a584361e.jpg');
	background-position: 80% 60%;
}


.tbrpg⋄bg-image⁚soma-the_messenger {
	background-image: url('soma-the_messenger.e95c9b02.jpg');
	background-position: 21% 90%;
}


.tbrpg⋄bg-image⁚soma-the_source {
	background-image: url('soma-the_source.764df7d1.jpg');
	background-position: 31% 90%;
}


.tbrpg⋄bg-image⁚soma-voyage_home {
	background-image: url('soma-voyage_home.27155f92.jpg');
	background-position: 54% 66%;
}


.tbrpg⋄bg-image⁚thomas_stoop-elysium {
	background-image: url('thomas-stoop-elysium.26586762.jpg');
	background-position: 37% 66%;
}


.tbrpg⋄bg-image⁚thomas_stoop-first_gate {
	background-image: url('thomas-stoop-first_gate.74426b64.jpg');
	background-position: 46% 30%;
}


.tbrpg⋄bg-image⁚thomas_stoop-lighthouse {
	background-image: url('thomas-stoop-lighthouse.24a165f3.jpg');
	background-position: 33% 99%;
}


.tbrpg⋄bg-image⁚thomas_stoop-otherside {
	background-image: url('thomas-stoop-otherside.1a1ca97d.jpg');
	background-position: 51% 10%;
}


.tbrpg⋄bg-image⁚thomas_stoop-pathway {
	background-image: url('thomas-stoop-pathway.7f4bcfbe.jpg');
	background-position: 69% 10%;
}


.tbrpg⋄bg-image⁚thomas_stoop-penthouse {
	background-image: url('thomas-stoop-penthouse.b5ac8ea1.jpg');
	background-position: 22% 10%;
}


.tbrpg⋄bg-image⁚thomas_stoop-snow_forest_1 {
	background-image: url('thomas-stoop-snow_forest_1.7873b0ab.jpg');
	background-position: 70% 50%;
}


.tbrpg⋄bg-image⁚thomas_stoop-snow_forest_2 {
	background-image: url('thomas-stoop-snow_forest_2.ee2e93d7.jpg');
	background-position: 69% 50%;
}


.tbrpg⋄bg-image⁚thomas_stoop-snow_forest_3 {
	background-image: url('thomas-stoop-snow_forest_3.a97f792e.jpg');
	background-position: 57% 1%;
}


.tbrpg⋄bg-image⁚thomas_stoop-surya {
	background-image: url('thomas-stoop-surya.fb8301e1.jpg');
	background-position: 54% 49%;
}


.tbrpg⋄bg-image⁚thomas_stoop-time_portal {
	background-image: url('thomas-stoop-time_portal.991fe35e.jpg');
	background-position: 70% 10%;
}


.tbrpg⋄bg-image⁚thomas_stoop-townsquare {
	background-image: url('thomas-stoop-townsquare.bdcbe6ae.jpg');
	background-position: 71% 50%;
}


.tbrpg⋄bg-image⁚thomas_stoop-weeping_owls {
	background-image: url('thomas-stoop-weeping_owls.ba6426c6.jpg');
	background-position: 60% 50%;
}


.scenery__legend {
	position: absolute;
	bottom: .3em;
	left: .6em;
	font-size: .7em;
	opacity: .7;

	text-shadow: 1px 1px 0 #333333, 1px -1px 0 #333333, -1px 1px 0 #333333, -1px -1px 0 #333333, 1px 0px 0 #333333, 0px 1px 0 #333333, -1px 0px 0 #333333, 0px -1px 0 #333333;
}

.scenery__prefetch {
	display: none;
}


.panel-top-content {
	padding: 5px;
	overflow-y: auto;
}

/* TODO move to OMR ? */
.main-area {
	z-index: calc(10 + var(--omr⋄ui__immersion-view--z-index));
}

/* override. TODO review */
.o⋄centered-article {
	padding: 0;
}


.netlify-widget {
	padding: 0 .5em;
}


.bm-menu-wrap .omr-auto-logo {
	text-align: center;
	width: 200px;
	margin: auto;
	padding: 1em 1em 0 1em;
}

#group-chat-container {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	background-color: var(--o⋄color⁚bg--main--backdrop);

	transform: translate3d(500px, 0, 0);
	transition: transform .25s ease-in-out;
}
.group-chat-container--open {
	/* 10px partially hide the scrollbar, nicer */
	transform: translate3d(10px, 0, 0) !important;
}
#tlkio-error-msg {
	color: #fff;
	padding: 20px;
	text-align: center;
}

/* https://stackoverflow.com/a/37600130/587407 */
/* big screens */
#group-chat-container {
	width: 500px;
	z-index: calc(var(--omr⋄ui__meta-view--z-index) - 20);
}
/* small screens */
@media screen and (max-width: 500px) {
	#group-chat-container {
		width: 95%;
	}
}

#tlkio {
	padding-bottom: 29px;
/*
	height: 100%;
	width: 100%;
 */
}

/******* OMR customization *******/

/* parameters we can't compute automatically */
:root {
	--omr⋄ui__logo-content--width_: 163px;
	/*--omr⋄ui__universe-anchor-content--width_: 230px*/
}

/* customizations */
.omr⋄logo {
	padding-bottom: calc(4px * var(--scale));
}
.omr⋄logo img {
	image-rendering: crisp-edges;
	/*padding-bottom: calc(4px * var(--scale));*/
}

.status⁚avatar--icon {
	align-self: center;
	font-size: 26px;
	margin-right: 4px;
}
.status⁚avatar--details {
	line-height: 14px;
}


/* Debug */
/*
.o⋄top-container {
	border-width: 1px;
}
*/

/* strange overlap bug on mobile */
.omr⋄content-area--inner {
	pointer-events: none;
}
.omr⋄content-area--inner > * {
	pointer-events: auto;
}


.page--savegame h2 {
	margin: 7px;
	display: inline;
}

/* https://ace.c9.io/#nav=embedding */
#ace-editor {
	xxposition: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


.dev-page {
	max-width: 375px;
	margin: 0 auto;
}



.dev-area {
	z-index: 50000;
	position: fixed;
	top: 0;
	right: 0;
	border-collapse: collapse;
	border: solid 1px black;

	color: black;
	background-color: rgba(255, 255, 255, 0.5);

	font-family: "Consolas", "Lucida Console", monospace;
	font-size: 14px;
}
.dev-area button {
	border: 0;
	font-size: inherit;
	padding: 0;
	box-shadow: none;
	color: black;
	background-color: transparent;
}
.dev-area td {
	border: solid 1px black;
	text-align: center;
	padding: 1px;
	padding-bottom: 3px;
}
.dev-area .DA-environment {
	background-color: #FC8227;
}
.dev-area .DA-controls {
	font-size: 20px;
	padding-left: 4px;
	padding-bottom: 0;
}
.dev-area .DA-refresh {
	font-size: 22px;
	padding-bottom: 0;
}

html, body {
	overflow: hidden; /* for case when tooltip overflow up/down */
}

body {
	width: -webkit-fill-available;
	width: -moz-available;
	width: fill-available;

	--o⋄font-size--default: 15px;
}

iframe#netlify-identity-widget {
	z-index: 2000 !important;
}

.float-container {
	z-index: 111;
}

.omr⋄cursorꘌsword--standard {
	/* credits: http://www.rw-designer.com/cursor-detail/79261 CC*/
	cursor: url('cursor--sword--standard--1.5x.8b0a0fef.png'), auto !important;
	cursor: -webkit-image-set(url('cursor--sword--standard--1.5x.8b0a0fef.png') 1x), auto !important;
}


/*# sourceMappingURL=index-2.ac22224c.css.map */