* { scrollbar-width: none; }
* { box-sizing: border-box; }

::-webkit-scrollbar {
    display: none; // Safari and Chrome
}

h1 {
    font-size: 28px;
}

html {
    /* height: 100vh; */
    /* height: 100dvh; */
    /* width: 100vw; */
    /* /1* color: #ececec; *1/ */
    /* /1* background: rgb(12,12,12); *1/ */
    /* /1* background: linear-gradient(335deg, #e3eae8 0%, #cee0e9 100%) fixed; *1/ */
    background: #181818;
    font-family: Roboto, sans-serif;
    --accent: #ffb500;
}

[data-bseason] {
    display: none !important;
}
.html-season-1 [data-bseason="1"] { display: inline-block !important; }
.html-season-2 [data-bseason="2"] { display: inline-block !important; }
.html-season-3 [data-bseason="3"] { display: inline-block !important; }
.html-season-4 [data-bseason="4"] { display: inline-block !important; }
.html-season-5 [data-bseason="5"] { display: inline-block !important; }
.html-season-6 [data-bseason="6"] { display: inline-block !important; }
.html-season-7 [data-bseason="7"] { display: inline-block !important; }

html.no-teams .hide-if-no-teams {
    visibility: hidden;
}

html.no-teams .none-if-no-teams {
    display: none;
}

html.no-teams .block-if-no-teams {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    color: #ececec;
    font-size: 14px;
    height: 100%;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

p {
    margin: 0.5em 0;
    font-size: 14px;
}

button {
    cursor: pointer;
}

.badge-item {
    display: inline-block;
    position: relative;
}

.badge-item-count {
    position: absolute;
    background: #fff;
    color: #000;
    border-radius: 20px;
    width: 28px;
    height: 24px;
    bottom: 0;
    right: 0;
    padding: 2px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #000;
    font-size: 14px;
}

.user-pic {
    display: inline-block;
    border-radius: 50%;
    font-size: 0;
    background: #aaa;
    position: relative;
}
.html-season-3 {
    background-image: url("/assets/s3_bg.png");
}
.html-season-3 .user-pic:after {
    content: "";
    display: block;
    background: url("/assets/s3_horns.png");
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: -12px;
}

.pad { padding: 0 20px; }

.bit {
    font-style: normal;
    font-family: monospace;
    border: 1px solid white;
    border-radius: 4px;
    padding: 0 10px;
    white-space: nowrap;
    background: black;
}

.accent,
.em {
    color: #ffb500;
    color: var(--accent);
}

.fake-a,
a {
    color: #ffb500;
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

.fake-a {
    white-space: normal;
    background: none;
	border: none;
	padding: 0;
	font: inherit;
    font-weight: bold;
	cursor: pointer;
	outline: inherit;
    margin: 0 3px;
}

.fake-a:hover,
a:hover {
    text-decoration: underline;
}

.index-intro-big { font-weight: bold; font-size: 1.5em; margin: -10px 0 20px 0; }
.index-intro-big a { text-decoration: underline; }

.quests-fluff {
    border-bottom: 1px solid white;
    margin: 0 25px 30px 25px;
    padding: 20px 20px;
}

.quests-fluff > h1 {
    margin: 5px 0 20px 0;
}

.quests-items {
    padding: 0 20px;
}

.quests-item {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 15px 20px;
    border: 1px solid #fff;
    color: #ececec;
    cursor: default;
    font-weight: normal;
    font-size: 20px;

    background: transparent;
    width: 100%;
    margin-bottom: 25px;
}
.quests-item:hover { text-decoration: none; }

.quests-item-title { font-weight: bold; font-size: 1.1em; }

.quests-item.is-new {
    background: linear-gradient(90deg, #471997, #B554BD);
}
.quest-item-badge {
    position: absolute;
    top: 1px;
    right: 75px;
    transform: translate(0, -50%);
    text-transform: uppercase;
    font-size: 15px;
    border: 1px solid white;
    background: #F6AF00;
    color: #ececec;
    padding: 6px 12px;
    border-radius: 20px;
    display: none;
}

.quests-item.is-new .quest-item-badge {
    display: block;
}

.quests-item.is-done {
    background: transparent;
}

.quests-item {
    cursor: pointer;
}

.quests-item.is-done {
    border-color: #888;
}
.quests-item.is-done .quest-item-time,
.quests-item.is-done .quests-item-title,
.quests-item.is-done .quests-item-chevron-wrap
{
    opacity: 0.5;
    color: inherit;
}

.quest-item-time {
    margin-top: 10px;
    display: flex;
    align-items: center;
    color: #FFB500;
    color: var(--accent);
}
.quest-item-time > img {
    margin-right: 15px;
}

.quests-item-cleared {
}


.btn-quests {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 10px 10px;
    border: 1px solid #fff;
    background: #0BC360;
    color: #fff;
    text-transform: uppercase;
    cursor: default;
    font-size: 17px;

    background: linear-gradient(90deg, #FFCC2B, #FF1E6A);

    width: 400px;
    max-width: 100%;
    font-weight: bold;

    margin: 0 10px;
}
.btn-quests:hover { text-decoration: none; }

.btn {
    display: inline-block;
    border-radius: 40px;
    padding: 20px 30px;
    border: 1px solid #fff;
    background: #0BC360;
    color: #fff;
    text-transform: uppercase;
    cursor: default;
    font-weight: bold;
    font-size: 16px;
}

.btn:hover {
    text-decoration: none;
    background: #0BC75c;
}

.btn.is-2 {
    background: transparent;
}

.btn.is-2:hover {
    background: transparent;
}

.google-login-btn {
    background: #cc523e; /* #4469b0; */
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    text-decoration: none !important;
    display: flex;
    align-items: center;
}

.google-login-btn > img {
    transform: translate(0, -1px);
    margin-right: 16px;
}

.facebook-login-btn {
    background: #176afa; /* #4469b0; */
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    text-decoration: none !important;
    display: flex;
    align-items: center;
}


.facebook-login-btn > img {
    transform: translate(0, -1px);
    margin-right: 16px;
}


@keyframes shake {
    0% { transform: rotate(0); }
    10% { transform: rotate(3deg); }
    20% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    40% { transform: rotate(-3deg); }
    50% { transform: rotate(2deg); }
    60% { transform: rotate(-2deg); }
    70% { transform: rotate(1deg); }
    80% { transform: rotate(-1deg); }
    90% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

.shake {
    animation: shake 600ms 1 linear;
    -moz-animation: shake 600ms 1 linear;
    -webkit-animation: shake 600ms 1 linear;
    -o-animation: shake 600ms 1 linear;
}

#logged-in-as {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 30px 0;
}

#logged-in-as > img {
    margin: 0 7px;
}


.top {
    background: #181818;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    font-size: 18px;
}

.top-inner {
    display: flex;
    align-items: start;
    justify-content: space-between;
    max-width: 700px;
    border-bottom: 1px solid #fff;
    margin: 0 auto;
    padding: 20px 20px 6px 20px;
    min-height: 65px;
}

.top-filler { height: 70px; }

.top-back { width: 40px; }
.top-text { margin-top: 4px; text-transform: uppercase; }
.top-icon { width: 40px; text-align: right; margin-top: -3px; }

.backbtn {
    color: inherit;
    text-decoration: none !important;
    border: 0;
    background: 0;
    font-size: 24px;
    height: 40px;
    width: 44px;
    padding: 0;
    margin-left: -5px;
}

.col-content {
    overflow-y: auto;
}

.bigempty,
.unknown,
.loading {
    opacity: 0.6;
    font-size: 90px;
    text-align: center;
    margin-top: 50px;
}

.bigempty
{
    font-size: 40px;
}

.item-bigicon {
    font-weight: bold;
    text-align: center;
    font-size: 70px;
}

.bottombar {
    position: fixed;
    bottom: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    padding: 4px 4px 10px 4px;
}
.bottombar.is-full {
    left: 0px;
    right: 0px;
    padding: 4px 0 10px 0;
}

.item-page {
    padding: 0 20px 90px 20px;
}

.item-title {
    margin-bottom: 0;
    font-size: 30px;
}

.item-page > label {
    margin-bottom: 15px;
    display: block;
}

.item-page > label > span {
    opacity: 0.7;
    display: block;
}

.row-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    font-size: 16px;

    padding: 30px 20px;
    border-bottom: 1px solid #fff;
    margin: 0 20px;
}
.row-item:last-child { border: 0; }

.row-num{
    font-size: 1.5em;
    color: #ffb500;
    color: var(--accent);
}

.loading-ellipsis { display: flex; align-items: center; gap: 5px; }
.loading-ellipsis > span {
    transition: transform ease-out 200ms;
    transform: translate(0, 2px);
}
.loading-ellipsis > .is-cur {
    transform: translate(0, -5px);
}

.quest {
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
    border-bottom: 1px solid #fff;
    margin: 0 20px;
    color: #ececec;
    font-weight: normal;
    text-decoration: none !important;
}
/* .quest:last-child { border: 0; } */

.big-input {
    padding: 20px 30px;
    border-radius: 60px;
    font-size: 20px;
    text-align: center;
    max-width: 100%;
}

.quest-answer-btns {
    transition: all ease 500ms;

    box-shadow: 0 0 10px rgba(0, 0, 0, .7);
    padding: 10px 10px 60px 10px;
    background: rgba(0, 0, 0, .7);
    margin-bottom: -60px;
    border-radius: 5px 5px 0 0;
    width: 100%;
}
.quest-answer-btns > .btn:empty {
    display: none;
}

.comic-tooltip {
    border: 0;
    border-bottom: 1px solid white;
    height: 10px;
    width: 100%;
    position: relative;
}

.comic-tooltip:after {
    content: " ";
    display: block;
    position: absolute;
    top: 100%;
    right: 50%;
    width: 30px;
    border-top: 1px solid white;
    margin-top: -1px;
    transform: translate(-60px, 0) rotate(-135deg);
    transform-origin: 100% 100%;
}

.comic-tooltip-2 {
    position: relative;
    border-bottom: 1px solid white;
    height: 100px;
    margin-right: 135px;
    margin-bottom: 30px;
}

.comic-tooltip-2:after{
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    border-top: 1px solid white;
    bottom: 0;
    right: 0;
    transform: rotate(135deg);
    transform-origin: 100% 100%;
}

.comic-tooltip-2:before {
    content: "";
    display: block;
    width: 170px;
    height: 170px;
    background: url("/assets/talk-head.png");
    background-size: contain;
    position: absolute;
    bottom: -32px;
    right: -150px;
}

.comic-tooltip-2.is-sm:before {
    right: -120px;
}

.comic-tooltip-2.is-sm{
    margin-right: 105px;
}

.comic-tooltip-2.is-sm:before {
    width: 120px;
    height: 120px;
    bottom: -20px;
}

.comic-tooltip-2-text {
    margin: 0 26px;
}

.comic-tooltip-2b {
    border-top: 1px solid white;
    margin: 30px 0;
}


.comic-tooltip-rotated-head {
    width: 140px;
    height: 140px;
    background-image: url("/assets/talk-head.png");
    background-size: contain;
    margin: auto;
}

.growls {
    position: fixed;
    top: 115px;
    left: 70px;
    right: 70px;
    z-index: 9999;
}

.growl {
    padding: 20px 30px;
    background: #0BC360;
    border: 1px solid white;
    border-radius: 10px;
    transition: all ease 300ms;
    opacity: 0;
    transform: translate(0, -100px) scale(.9);
    font-size: 20px;
    max-width: 500px;
    margin: 0 auto 10px auto;
}
.growl > button {
    position: absolute;
    top: -30px;
    right: -10px;
    border: 0;
    padding: 35px 20px 20px 35px;
    font-size: 24px;
    background: transparent;
    color: #fff;
}

.growl.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.growl > b:first-child {
    display: block;
    font-size: 0.9em;
    margin-bottom: 4px;
}

.growl.is-err {
    background: #C30b60;
}

.growl.is-warn {
    background: #c49a10;
}


.quest-points {
    font-size: 60px;
    color: #FFB500;
    color: var(--accent);
    text-align: center;
}

.quest-points > .quest-points-star {
    font-size: 1.6em;
    margin-top: -20px;
    margin-bottom: -10px;
}

.done-badge-wrap {
    position: relative;
    height: 50px;
    /* outline: 1px solid red; */
    margin-top: -20px;
}

.done-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    border: 1px solid white;
    border-radius: 5px;
    display: inline-block;
    padding: 18px;
    background: #181818;
}

.team-chooser {
    display: flex; flex-direction: column;
    border: 1px solid white;
    border-radius: 5px;
    overflow: hidden;
}
.team-chooser > label > input[type="radio"] {
    position: absolute;
    top: -20px;
}

.team-chooser > a {
    display: block;
    text-align: center;
    border: 0;
    background: #000;
    padding: 20px 30px;
    color: rgba(255, 255, 255, 0.7);
}
.team-chooser > a:hover {
    background: linear-gradient(90deg, #311B5B, #8D3659, #FF9D48);
    color: white;
    text-decoration: none;
}

.team-chooser > label > input + span {
    display: block;
    padding: 20px 10px;
    color: rgba(255, 255, 255, 0.7);
    background: #181818;
}

.team-chooser > label > input:checked + span {
    color: white;
    background: linear-gradient(90deg, #311B5B, #8D3659, #FF9D48);
}

hr { width: auto; border: 0; border-top: 1px solid white; margin: 30px 0; }

hr.hrdesc {
    margin-top: 30px; margin-right: 20px; margin-left: 20px; width: auto;
}

div.hrdesc {
    position: relative;
    margin-top: -30px; text-align: center;
    transform: translate(0, -50%);
}

div.hrdesc > div {
    background: #181818; padding: 0 10px; display: inline-block;
}

.cookie-banner {
    z-index: 99990;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    text-align: center;
}
.cookie-banner > div {
max-width: 320px;
background: #181818;
padding: 30px;
border: 1px solid white;
margin: 50px auto;
}


.quest-final-desc-top { display: block ; }
.quest-final-desc-bottom { display: none; }

html,
html .top,
html div.hrdesc > div
{
    /* background: #01456f; */
    /* --accent: #D84F41; */
}

/* SEZON 3 - szlakiem slowianksich demonow  */
.html-season-3 .comic-tooltip-2:before {
    background: url("/assets/talk-head-3-demon.png");
    background-size: contain;
}

/* SEZON ŚWIĄTECZNY - oba */

.html-season-2 .quest-final-desc-top { display: none; }
.html-season-2 .quest-final-desc-bottom { display: block; }

.block-team-4 { display: none; }
.html-team-4 .block-team-4 { display: block; }
.block-team-5 { display: none; }
.html-team-5 .block-team-5 { display: block; }
.html-season-2 #index_team_ranking_button { visibility: hidden; }
.html-season-2 .team-chooser > label > input + span { background: rgba(0,0,0,0.5); }
.html-season-2 .team-chooser > label > input:checked + span {
    background: linear-gradient(90deg, #501610, #D74A3B);
}
.html-season-2 .btn-quests { background: linear-gradient(90deg, #501610, #D74A3B); }
.html-season-2 .quests-item.is-new { background: linear-gradient(90deg, #501610, #D74A3B); }
.html-season-2 .quests-item.is-new .quest-item-badge { background: #501610; }
.html-season-2 .quests-item.is-new .quest-item-time { color: white; }
.html-season-2 .btn { background: linear-gradient(90deg, #501610, #D74A3B); }
.html-season-2 #unlocker_wrap { margin-top: 20px; }
.html-season-2 .comic-tooltip-2:before {
    background: url("/assets/talk-head-xmass.png");
    background-size: contain;
}

.html-page-choose_team.html-season-2 .team-chooser {
    flex-direction: row;
    border: 0;
    max-width: 400px;
    margin: 0 auto;
    overflow: visible;
    margin-bottom: 70px;
}
.html-page-choose_team.html-season-2 .team-chooser input { opacity: 0.001; }

.html-page-choose_team .team-chooser-team-id-4,
.html-page-choose_team .team-chooser-team-id-5 {
    flex: 1;
    height: 200px;
    position: relative;
}

.html-page-choose_team .team-chooser-team-id-4 > span,
.html-page-choose_team .team-chooser-team-id-5 > span {
    font-size: 1.5em;
    font-weight: bold;
    background: transparent !important;
    text-align: center;
    position: absolute;
    top: 100%;
    padding-top: 0;
}

.html-page-choose_team .team-chooser-team-id-5 > span { right: 0px; }
.html-page-choose_team .team-chooser-team-id-4 > span { left: 0; right: 50px; }

.html-page-choose_team .team-chooser-team-id-4:after,
.html-page-choose_team .team-chooser-team-id-5:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
}

.html-page-choose_team.html-team-5 .team-chooser-team-id-4:after { opacity: 0.25; }
.html-page-choose_team.html-team-4 .team-chooser-team-id-5:after { opacity: 0.125; }

.html-page-choose_team .team-chooser-team-id-4:after {
    background: url("/assets/talk-head-xmass-z.png") no-repeat 0 100% !important;
    background-size: contain !important;
    transform: scale(-1, 1);
}

.html-page-choose_team .team-chooser-team-id-5:after {
    background: url("/assets/talk-head-xmass-pm.png") no-repeat 0 100% !important;
    background-size: contain !important;
}

.html-page-about_2_xmass.html-season-2.html-team-4 .comic-tooltip-2:before,
.html-page-index.html-season-2.html-team-4 .comic-tooltip-2:before {
    background-image: url("/assets/talk-head-xmass.png");
}

.comic-tooltip-2.is-no-head:before {
    display: none !important;
}

.html-season-2, .quest-points-star {
    color: #fbbd0c;
}


/* SEZON ŚWIĄTECZNY - p miolajowa */
.html-season-2.html-team-4 body { 
background: no-repeat url("/assets/xmass_bg_z.png") 100% 0; 
background-size: 105px 120px;
}
.html-season-2.html-team-4,
.html-season-2.html-team-4 .top,
.html-season-2.html-team-4 div.hrdesc > div
{
    background: #1c3023;
    --accent: #A5322C;
}

.html-season-2.html-team-4 .comic-tooltip-2:before {
    background-image: url("/assets/talk-head-xmass-z.png");
}
.html-season-2.html-team-4.html-page-quest .comic-tooltip-2:before {
    background-image: url("/assets/talk-head-xmass-pm.png"); /* the other one */
}
.html-season-2.html-team-4 .comic-tooltip-rotated-head {
    background-image: url("/assets/talk-head-xmass-z.png");
}


/* SEZON ŚWIĄTECZNY - zaba */
.html-season-2.html-team-5 body { 
background: no-repeat url("/assets/xmass_bg_pm.png") 100% 0; 
background-size: 105px 120px;
}

.html-season-2.html-team-5,
.html-season-2.html-team-5 .top,
.html-season-2.html-team-5 div.hrdesc > div
{
    background: #01456f;
    --accent: #D84F41;
}

.html-season-2.html-team-5 .comic-tooltip-2:before {
    background-image: url("/assets/talk-head-xmass-pm.png");
}
.html-season-2.html-team-5.html-page-quest .comic-tooltip-2:before {
    background-image: url("/assets/talk-head-xmass-z.png"); /* the other one */
}
.html-season-2.html-team-5 .comic-tooltip-rotated-head {
    background-image: url("/assets/talk-head-xmass-pm.png");
}