body { background: #282828; color: #FFE5B5; font-family: Rubik, helvetica, sans-serif; }

main { display: block; position: relative; margin-left:0.6rem; padding-top:30px; padding-bottom:100px; }
@media (max-width: 600px) and (orientation: portrait) {
	main { padding-left: 1em; padding-right: 1em; }
}

:root {
    --header-height: 2.6em;
}

h1 { font-size:2rem;	color: #f0f0f0; margin:0        0   0.2rem  -0.6rem;		font-weight: normal; }
h2 { font-size:1.5rem;	color: #f0f0f0; margin:3.5rem   0   0.7rem  -0.4rem;	    font-weight: normal; }
h3 { font-size:1.1rem;	color: #f0f0f0; margin:1.8rem   0   0.1rem  -0.3rem;		font-weight: normal; }
h4 { font-size:1.0rem;	color: #f0f0f0; margin:1.3rem   0   0       -0.2rem;		font-weight: normal; }
h5 { font-size:0.9rem;	color: #f0f0f0; margin:1.2rem   0   0       -0.0rem;		font-weight: normal; }

ul { margin: 0 0 0.4em 0; padding:0.3em 0 0 0; line-height: 1.35; }
li { margin-left: 1.1em;  padding: 0; }
li ul { margin-left: 0em; }

p { margin: 0; font-weight: 400; line-height: 1.75; }
p+p { margin-top: 0.7em; }
p+ul { margin-top: 0; }
ul+p { margin-top: 1.2em; }
li p { margin-top: 0; }

.content { margin-top:2.5em; }
.content>h2:first-child { margin-top: 0; }
li+h2 { margin-top: 0; }
li+h3 { margin-top: 0; }
h1+h2 { margin-top: 0; }
h1+h3 { margin-top: 0; }
h2+h3 { margin-top: 0; }

tooltipWrapper h1 { margin-left:0; }
tooltipWrapper h2 { margin-left:0; }
tooltipWrapper h3 { margin-left:0; }
tooltipWrapper h4 { margin-left:0; }
tooltipWrapper h5 { margin-left:0; }



.skillLabel { color: gold; cursor:help; }
.healing { color: aquamarine; cursor:help; }
.physical { color: #DB5454; cursor:help; }
.magic { color: #FF6CF6; cursor:help; }
.pure { color: #55DD55; cursor:help; }
.leo { color: #68CDF4; }
.donnie { color: #DF7CFF; }
.raphael { color: #FF5A49; }
.michael { color: #FF8000; }
.skillDetails { margin-top:1.3em; }

a { color:lightgreen; text-decoration: none; }
a:hover { color:orange; }

spinnerContainer { display: flex; position: fixed; left: 0; top: var(--header-height); width: 100vw; height: calc(100vh - var(--header-height)); justify-content: center; align-items: center; }
spinner { width: 60px; height: 60px; border-top: 6px solid greenyellow; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20vh; }
@keyframes spin { to { transform: rotate(360deg); } }




.lightArea { background: white; color:#202122; padding-left: 1.8rlh; padding-right: 1.8rlh; }
.lightArea h1 { color: initial; font-weight: bold; }
.lightArea h2 { color: initial; font-weight: bold; }
.lightArea h3 { color: initial; font-weight: bold; }
.lightArea h4 { color: initial; font-weight: bold; }
.lightArea a { color:initial; text-decoration: underline; }
.lightArea a:hover { color:initial; }
.lightArea input[type="text"]  { background-color: white; color:initial; }
.lightArea input[data-valid="false"]  { border-color: pink; }
.lightArea .physical { color: red; }
.lightArea .magic { color: darkviolet; }
.lightArea .pure { color: darkgreen; }
.lightArea option { background-color: white; }

.darkArea { }
.darkArea a { color:lightgreen; text-decoration: none; }
.darkArea a:hover { color:orange; }

input[type="text"] { background-color: #161616; border: 1px solid #323232; color: #FFE5B5; padding: 4px; }
input[type="text"]:focus { outline:none; border-color:orange; }
input[data-valid="false"] { background: indianred; }

.customCheckbox { position:relative; }
.customCheckbox input { display: none; }
.customCheckbox input+div { display:inline-block; width: 1.3em; height: 1.3em; border: 1px solid #555; border-radius: 7px; margin-right: 6px; vertical-align: middle; cursor: pointer; text-align: center; align-content: center; }
.customCheckbox input+div span { visibility:hidden; color: yellowgreen; font-weight:bold; }
.customCheckbox input:checked+div span { visibility:visible; }

select { padding: 0.3em; appearance: none; background-color: #242424; border: 1px solid #323232; color: #FFE5B5; 
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFE5B5%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.lightArea select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-color: white;
    color: initial;
}
select:focus { outline:none; border-color:orange; }
option { padding: 0.3em 0; vertical-align: middle; min-block-size: 1em; background-color:#242424; }
option:hover { box-shadow: 0 0 10px 100px #222 inset; color: lightgreen; }

header { background: #222; color: #ddd; box-shadow: 0 0 10px black; z-index: 10; position: relative; }
header a { display: flex; align-items: center; font-size: 90%; color: greenyellow; }
header a:hover { color: orange; }
@media (max-width: 600px) and (orientation: portrait)  {
    header { }
}
@media (max-height: 600px) and (orientation: landscape) {
}

footer { background: #222; color: #ddd; padding:0.5em; z-index: 10; position: relative; }
footer a { align-items: center; color: #ddd; text-decoration: none; color: lightgreen; }
footer a:hover { color: orange; }

tooltipWrapper { padding: 12px; position: fixed; z-index: 100; visibility: hidden; text-align:left; font-size:0.9rem; pointer-events: none;
    border: 1px solid yellowgreen; border-radius: 5px; color: #FFE5B5; max-width: 400px; 
	background: linear-gradient(135deg, #101010, #202020 50%, #101010);
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
tooltipWrapper.ttLight { border: 1px solid orange; }
tooltipWrapper h1 { font-size:1.2rem; margin-top: 0; }
tooltipWrapper h1 { font-size:1.1rem; margin-top: 0; }
tooltipWrapper p { line-height:1; }
.anchoredTooltip { pointer-events:all; }

.ttGrid { display:grid; grid-template-columns: auto 1fr; align-items: center; width:100%; min-width: 260px; gap:8px; }
.ttEmblem { border:1px solid yellow; align-self: start; }
.ttEmblem.ttNoBorder { border:0; }
.ttwide { max-width:none; }
tooltipFooter { display: block; margin-top: 1em; padding-top:1em; border-top:1px solid #FFE5B5 }

table { /*border: 1px solid #FFE5B5; border-collapse: collapse; margin-left:1px;*/ }
th { padding: 0.3em 0.5em; text-align: left; }
td { padding: 0.3em 0.5em; }
table itemList { display: flex; }
table+p { margin-top: 1em; }


.useableArea {
    margin: auto;
    max-width: 900px;
    min-height: 100%;
    align-content: stretch;
}
.bannerImg { max-width: 100%; width:100%; height:auto; display: block; object-fit: cover; aspect-ratio: 10/3; 
    border-radius: 0 0 50px 50px; border: 1px solid greenyellow; border-top: 0; box-shadow: 0 0 20px black; }

.icon { display:inline-block; vertical-align: middle; padding-bottom:2px; width: 20px; height:20px; }
.borderImage { border: 1px solid yellowgreen; border-radius: 20px;  }
.rightImage { float: right; margin: 5px 0 5px 5px; }
.leftImage { float: left; margin: 5px 5px 5px 0; }
.blockImage { display: block; margin: 1.4em 0 0 -2px; border-radius: 0; border-width: 2px; border-color: goldenrod; }
.wideImage { display:block; max-width: 100vw; margin: 1em 0; justify-self:center; }
.enlargeable { cursor: zoom-in; max-width: 100%; }
@media (max-width: 600px)  and (orientation: portrait) { 
    .rightImage { float: none; } 
}
statList { margin-top: 1em; }


itemList { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 6px; }
itemList+p { margin-top: 0.7em; }
p+itemList { margin-top: 0.7em; }

itemTable { display:grid; grid-template-columns:auto 1fr; column-gap: 6px; row-gap: 2px; align-items:center; }
itemTable itemQty { grid-column:1; }
itemTable span { grid-column:2; }

itemQty { position: relative; display:block; width:72px; height:72px; margin-left:-1px; }
itemQty count { position: absolute; bottom: 7px; right: 6px; background: #000000C0; border-radius: 4px; padding: 1px 2px 0 2px; min-width: 0.55em; pointer-events: none; text-wrap-mode: nowrap; font-size:90%; color: wheat; }
itemQty img { margin:0; display:block; width: 100%; height: 100%; }
.darkArea itemQty a { color:#FFE5B5; }
.darkArea itemQty a:hover { color:#FFE5B5; }

.mediumItemList { grid-template-columns: repeat(auto-fill, 58px); gap:4px; margin-left:-1px; }
.mediumItemList itemQty { width: 58px; height: 58px; }
.mediumItemList itemQty count { bottom: 6px; right: 5px; }

.smallItemList { grid-template-columns: repeat(auto-fill, 40px); gap: 3px; }
.smallItemList itemQty { width: 40px; height: 40px; }
.smallItemList count { bottom: 5px; right: 5px; }

tooltipWrapper itemList { display: flex; }
.itemGrid { max-width: 350px;  }




questList {
    display: grid;
    grid-template-columns: 1em minmax(auto, 30em) auto;
}
questList left { grid-column:1 / 3; margin: auto 0; }
questList right { grid-column:3; margin: 1px 0; padding-left: 5px; display: flex; gap: 2px; }
questList padding { grid-column:1; }
questList itemQty { width: 52px; height: 52px; }
questList itemQty count { bottom: 5px; right: 5px; }
p+questList { margin-top: 0.8em; }

tooltipWrapper questList { grid-template-columns: 0px 1fr auto; }
tooltipWrapper questList itemQty count { padding-left: 3px; }


shop { display: grid; grid-template-columns:repeat(auto-fit, 74px); row-gap: 15px; margin-top:10px; }
shopSlot { display: grid; grid-template-columns: auto; }
shopSlot itemQty { grid-row: 1; display: block; width: 72px; height: 72px; margin:0 auto; }
shopSlot itemQty count { bottom: 7px; right: 7px; }
shop cost { grid-row: 2; }
shop cost img { margin-left:-10px; font-size: 90%; }
itemQty count.starCount { font-size: 75%; line-height: 1.2; letter-spacing: -0.5em; padding-right: 0.5em; bottom: 6px; right:6px; }

costs { display: inline-flex; gap: 0.8em; align-items:center; margin-top:2px; }
costs>span { font-weight:bold; vertical-align:middle; }


cost { margin:0 auto; }
cost img { width:1.6em; aspect-ratio:1; vertical-align: middle; margin-right: 2px; }
cost span { vertical-align:middle; }

bundles { display:grid; grid-template-columns:auto auto auto auto; width:max-content; column-gap: 5em; }
bundleHeader { font-weight:bold; margin-bottom:0.4em; }
bundleName { grid-column: 1; align-self: center; max-width:10em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
bundleCost { align-self: center; }
bundleSeparator { grid-column: 1; height:1.8em; }
bundles itemList { grid-auto-flow: column; }

note { cursor:help; }
copyButton { display:inline; }
.panScrollable { user-select: none; }

team { display: block; }
team hero { display:inline-block; position:relative; width:80px; height:80px; margin-right: 2px; }
team hero img { width:100%; height:100%; }
team hero pet { position:absolute; width: 35px; height: 35px; right: -12px; top: -12px; z-index: 1; }
p+team { margin-top: 12px; }


/* cyrillic-ext */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(rubik2.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(rubik2.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(rubik2.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(rubik1.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}