@import 'fonts.css';
@import 'icons.css';
@import 'leaderboard.css';
@import 'footer.css';
@import 'news-override.css';
:root{
    --color-main:#a659ee;
    --color-main-contrast:#8747D8;
    --color-main-alt:#6613b5;
    --color-text-dark:#000;
    --color-text-light:#fff;
    --color-text-dark-alt:#140324;
    --color-text-dark-link:#6613b5;

	--color-button-text:#fff;
	--color-button-border:#C688FF;
	--color-button-outline:#3D1C66;
    --button-background:linear-gradient(180deg, var(--color-main) 50%, var(--color-main-contrast) 50%);

	--color-button-g-text:#fff;
	--color-button-g-border:#9FFF88;
	--color-button-g-outline:#30661C;
    --button-g-background:linear-gradient(0deg, #59ad39 50%, #5FBE47 50%);
	
	--color-button-b-text:#fff;
	--color-button-b-border:#99CFFF;
	--color-button-b-outline:#1F4359;
    --button-b-background:linear-gradient(0deg, #4397CC 50%, #53A6EF 50%);

	--color-button-r-text:#fff;
	--color-button-r-border:#f36969;
	--color-button-r-outline:#330101;
    --button-r-background:linear-gradient(180deg, #f34848 50%, #cd2f2f 50%);

    --color-body-background:#212529;
    --color-body-background-alt:#000;
    --color-box-background:#fff;
    --color-box-border:var(--color-main-alt);

    --common-border-radius-l:12px;
	--common-border-radius:6px;
	--common-border-radius-sm:4px;
    --header-background:linear-gradient(180deg, var(--color-main) 50%, var(--color-main-contrast) 50%);
	--background-zigzag:linear-gradient(135deg, #f5c23e 25%, transparent 25%), linear-gradient(225deg, #f5c23e 25%, transparent 25%), linear-gradient(45deg, #f5c23e 25%, transparent 25%), linear-gradient(315deg, #f5c23e 25%, #f5dd9f 25%);
}

@keyframes moving-tile{
    0% { background-position: 0 0;}
    100% {  background-position: 244px 190px;}
}
html, body{padding:0;margin:0; font-family:Ticuto, Arial, sans-serif;overflow-x:hidden}
a { color:var(--color-text-dark-link);text-decoration: none;}
a:hover { color:var(--color-text-dark-alt);}
body{
    min-width:100%;
    min-height:100vh;
    animation:moving-tile 60s linear infinite;
}
#playerdisplayheader{ height:32px; display:flex;flex-direction: row;padding:3px;margin-bottom:-20px;justify-content: space-between;user-select: none;}
#playerdisplaycurrency{ display:flex;flex-direction: row; }
#playerdisplaygold, #playerdisplayshard{
    padding-right:8px;
    background-color:#0005;
    border-radius:var(--common-border-radius-sm);
    margin:0 2px;

}
.theme-light #playerdisplaygold, .theme-light #playerdisplayshard { background-color:#fff7; }
#socialbox{ padding:0.25em 0.5em; }
#socialboxinfo{ text-align:center; }
button, .button-green, .button-blue, .button-red{
	color:white;
    font-family:Ticuto, Arial, sans-serif;
}
button{
	border:2px solid var(--color-button-border);
	outline:2px solid var(--color-button-outline);
	background-image:var(--button-background);
	border-radius:var(--common-border-radius-sm);
	margin:0 5px;
}
button:hover{ outline:2px solid var(--color-body-background-alt); }
.button-green{
    text-shadow:0 2px var(--color-button-g-outline);
	border:2px solid var(--color-button-g-border);
	outline:2px solid var(--color-button-g-outline);
	background-image:var(--button-g-background);
	border-radius:var(--common-border-radius-sm);
}
.button-red{
    text-shadow:0 2px var(--color-button-r-outline);
	border:2px solid var(--color-button-r-border);
	outline:2px solid var(--color-button-r-outline);
	background-image:var(--button-r-background);
	border-radius:var(--common-border-radius-sm);
}
.button-blue{
    text-shadow:0 2px var(--color-button-b-outline);
	border:2px solid var(--color-button-b-border);
	outline:2px solid var(--color-button-b-outline);
	background-image:var(--button-b-background);
	border-radius:var(--common-border-radius-sm);
}
.button-sm{ padding:3px 6px; font-size:0.795rem; }
.button-m { padding:5px 9px; font-size:0.98rem; }
.button-l { padding:5px 9px; font-size:1.075rem; }
.box-subtitle{
	font-weight:600;
	font-size:1.05rem;
    margin-bottom:0.1rem;
}
.text-center{ text-align:center; }
.is-collapsed{ display:none!important; }
header{
    background-color:var(--color-main);
    color:var(--color-text-light);
    font-weight: 700;
    display:flex;
    margin:auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow:0 5px var(--color-main-alt);
}
#headerright{ display:flex; }
#featuredSpacesTitle{ position: relative; }
#featuredSpacesTitle #refreshFeatured{
    position: absolute;
    top: 20%;
    right: 0;
}

/** MOBILE **/
@media (max-width:745px) { 
    header{
        width:calc(100% - 24px);
        padding-left:12px;
        padding-right:12px;
        height:calc(40px + 2em);
    }
    #content{
        flex-direction:column;
        margin:12px auto;
        width:calc(100% - 0.75rem);
    }
    #contentBody{
        display:flex;
        flex-direction:column;
    }
    #contentleft, #contentright{ width:100%; }
    #featuredspacescontent{
        display:flex;
        flex-direction: column;
        padding: 3px;
    }
    .featured-space, .featured-item-entry{
        width:calc(100% - 1rem);
        margin:0.25rem 0.5rem;
    }
    .mobile-hide{ display:none!important; }
    #popupOverlayInnerTopTitle{
        margin:0.05em;
        font-size:1.2em;
    }
    .games-entry{
        margin:3px 3px;
        min-height:33.3vw;
        height:33.3vw;
        width:calc(50% - 12px);
    }
    #gamesContent, #gamesContentMobile{
        display:flex;
        justify-content: space-evenly;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        padding:3px;
    }
    #contentTopContent{
        flex-direction: column;
    }
    .event-item-entry{ width:100%;margin-bottom:1em; }
    .heading-big h2{ font-size:1.45rem;margin:0.334em 0; }
    .heading-normal h2{ font-size:1.2rem;margin:0.275em 0; }
    .heading-small h2{ font-size:1.1rem;margin:0.2em 0; }
    .no-mobile{ display:none!important; }
}
/** DESKTOP SM **/
@media (min-width:745px) { 
    header{
        width:calc(100% - 32px);
        padding-left:16px;
        padding-right:16px;
        height:calc(30px + 2.1em);
    }
    #content{
        max-width:1280px;
        width:calc(100% - 1em);
        flex-direction:column;
        margin:0.5em;
    }
    #contentBody, #featuredspacescontent{
        display:flex;
        flex-direction: row;
    }
    #contentleft{ width:clamp(150px, 37.5%, 400px); }
    #contentright{
        width:100%;
        width:-webkit-fill-available;
    }
    #featuredspacescontent{
        flex-wrap:wrap; 
        padding: 5px 2px;
    }
    .featured-space, .featured-item-entry{ 
        width: 47.75%;
        margin:2px;
    }
    #popupOverlayInnerTopTitle{
        margin:0.1em;
        font-size:1.75em;
    }
    .games-entry{
        width:calc(100% - 0.8em);
        margin:2px 2px;
        min-height:160px;
        height:160px;
    }
    #gamesContent, #gamesContentMobile{
        display:flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding:5px 2px;
    }
    .heading-big h2{
        font-size:1.325rem;
        margin:0.3em 0;
    }
    .heading-normal h2{
        font-size:1.15rem;
        margin:0.265em 0;
    }
    .heading-small h2{
        font-size:1.075rem;
        margin:0.18em 0;
    }
    .event-item-entry{
        width:32.5%;
    }
    .no-desktop{ display:none!important; }
}
/** DESKTOP L **/
@media (min-width:1150px) {
    header{
        width:calc(100% - 60px);
        padding-left:30px;
        padding-right:30px;
        height:calc(32px + 2.125em);
    }
    #content{
        max-width:1480px;
        width:calc(100% - 2em);
        flex-direction:column;
        margin:1em auto;
    }
    .featured-space, .featured-item-entry{
        width:clamp(160px, 23.8%, 25vw);
        margin:3px 2px;
    }
    #popupOverlayInnerTopTitle{
        margin:0.1em;
        font-size:2.1em;
    }
    .games-entry{
        width:calc(100% - 1em);
        margin:3px 2px;
        min-height:170px;
        height:170px;
    }
}

#content{
    background-color:#0000;
    display:flex;
}

#playerdisplayhand, #quoteNPCDisplay{
    width:100%;
	background-image:var(--background-zigzag);
	background-position:31px 0, 31px 0, 0 0, 0 0;
	background-size:62px 62px;
}

#playerdisplay, #quoteNPCBase{
    width:106px;
    height:210px;
    margin:auto;
}

#playerdisplayfooter{
	padding:9px 4px;
	justify-content:space-around;
}
.theme-light #playerdisplayfooter, .theme-light #competitionboxtabs{ background-color:var(--color-main-contrast); }
.theme-dark #playerdisplayfooter, .theme-dark #competitionboxtabs{ background-color:var(--color-main-alt); }
	

#playTicutoMainBtn{
    width:100%;
    background:var(--button-g-background);
    padding:6px 0px;
    font-size:1.5rem;
	color:white;
    text-shadow:0 2px var(--color-button-g-outline);
	border:2px solid var(--color-button-g-border);
	outline:2px solid var(--color-button-g-outline);
    box-sizing: border-box;
    font-weight:800;
    text-align:center;
	z-index:2;
    user-select:none;
}

#logo{
    max-height:88%;
    pointer-events: none;
}

.box{
    margin:5px;
    border-radius:var(--common-border-radius);
}

.boxheading{
    position: relative;
    color:var(--color-text-light);
    background:var(--header-background);
    text-align:center;
    line-height:1;
    border-radius:4px 4px 0 0 ;
    padding:0 0.4em;
    text-shadow:0 2px var(--color-button-outline);
	user-select:none;
}

.button-collapse{
    position: absolute;
    left:0px;
    top:20%;
}

.playerdisplay, #quoteNPCCharacter{
    height:160px;
    width:120px;
    background-size: cover;
    image-rendering: pixelated;
    z-index:2;
    position:relative;
    bottom:80px;
    margin:auto;

}
.playerdisplaybase, #quoteNPCBase{
    height:78px;
    width:104px;
    background-size: cover;
    image-rendering: pixelated;
    z-index:1;
    background-image: url(../images/playertile.png);
    position:relative;
    top:122px;
}

h2{ padding:3px; }
.text-bold{ font-weight:700; }
#ui-player{
    display:flex;
    align-items: center;
    margin-right:calc(5px + .25vw);
    font-size:1.15em;
}

#ui-theme-icon{
    background-image:url('../images/theme.png');
    height: 1.1rem;
    width: 1.1rem;
    background-size: contain;
}

#competitionboxtabs{
	display:flex;
	align-items:center;
	justify-content:space-around;
	padding:6px 3px;
}

#featuredspacescontent{
    display:flex;
    justify-content: space-evenly;
    padding: 5px 2px;
}

.featured-space, .featured-item-entry, .games-entry{
    background-size: cover;
    border-radius:var(--common-border-radius);
    border:2px solid var(--color-button-border);
}
.featured-item-entry{ background-blend-mode:lighten; }
.featured-space-inner, .featured-item-inner, .games-entry-inner{
    border-radius:var(--common-border-radius-sm);
    background-color:#000a;
    color:var(--color-button-text)!important;

}
.featured-space-inner, .featured-item-inner, .event-item-inner{
    width:100%;
    height:100%;
    justify-content: space-between;
    padding:0.4rem;
    padding-bottom:10px;
    box-sizing: border-box;
}
.featured-space-buttons, .event-space-buttons{
    justify-content: flex-end;
    width:100%;
}
.featured-space-buttons button, .event-space-buttons button{ margin-left:1rem; }
.featured-space-title, .featured-item-title, .games-entry-title{
    padding:5px;
    margin:0;
    margin-bottom:0.315em;
    text-shadow:0 2px var(--color-outline-border);
}

.featured-space-desc, .featured-item-desc, .games-entry-desc{
    padding:2px;
    font-size:0.825rem;
    margin-top:-0.2rem;
}

.featured-space-owner, .featured-item-type{
    padding:2px;
    font-size:0.7rem;
    font-style: italic;
    margin-top:-0.8rem;
    margin-bottom:2.5rem;
}

.featured-item-titlecontent{
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
}

.featured-item-icon{
    background-size: contain;
    width: 32px;
    height: 32px;
    min-width:32px;
}
.games-entry{ background-position: center; }
.games-entry-inner{
    opacity:0;
    transition: 250ms;
    height:100%;
    flex-direction: column;
    justify-content: space-around;
}

.games-entry-inner:hover{
    opacity:1;
    backdrop-filter:blur(3px);
}

#contentTopContent{
	display:flex;
	justify-content:space-evenly;
}

.popup-section-grid, .popup-section-pre, .popup-section-icons, .friendslist-entry, .featured-item-titlecontent, .featured-space-buttons, .event-space-buttons, #playerdisplayfooter{
    display:flex;
    flex-direction: row;
}
.box, .seasonalitem, .friendentry-friend, .popup-related-grid-item, .featured-space-inner, .featured-item-inner, .event-item-inner, .games-entry-inner{
	display:flex;
	flex-direction:column;
}

.event-item-inner{
    background-color:#0000!important;
}

.seasonalitem{
	padding:9px 20px;
	justify-content:center;
	width:24%;
	text-align:center;
}

.box-divider{
	height:auto;
	margin:10px 5px;
	width:2px;
}

.friendentry-face{
    height:50px;
    width:50px;
    background-position: center;
    background-size:52px;
    min-width:40px;
    margin-right:5px;
    background-repeat:no-repeat;
}

.friendslist-date{
    font-size:0.7rem;
    font-weight:300;
    font-style:italic;
}

.friendentry-friend{
    align-items: flex-start;
    padding-left:0.35rem;
    font-weight:600;
    font-size:0.9rem;
    justify-content: center;
    min-width:55%;
}
.friendslist-entry{ margin-bottom:4px; }
.friendslist-vip{
    width:max-content;
    width:-webkit-fill-available;
    background-position-x: right;
    background-size: 24px 14px;
    background-position-y: center;
    background-repeat:no-repeat;
    height:34px;
}
.friendslist-isvip{ background-image:url('../images/vip.gif'); }
.related-item-icon{
    image-rendering: pixelated;
    background-color: #0005;
    border-radius: var(--common-border-radius-sm);
    height:48px;
    width:48px;
    background-size:51px;
    background-repeat: none;
    image-rendering: pixelated;
}

.related-icon-name{
    font-size:0.8225em;
    margin-top:4px;
    text-align: center;
    width:82.5%;
}

.popup-related-grid-item{
    width:calc(50px + 2.25em);
    justify-items: center;
    align-items:center;
    margin:0.6em;
}
.popup-section-grid{ flex-wrap: wrap; }
.popup-section-pre{ justify-content: space-between; }
#quoteNPCText{
    position: relative;
    margin-top: calc(-1.05vh + -45px);
    z-index: 2;
    user-select: none;
    color:white;
}
#quoteNPCName{
    background-color: var(--color-main);
    font-size: 1.15em;
    font-weight: 600;
    padding: .5em;
    width: fit-content;
    min-width: 40%;
    text-align: center;
    margin-left:0.75em;
    position: relative;
    transform:skew(-4deg) rotate(0.65deg);
}
#quoteNPCQuote{
    background-color: #000a;
    padding: 0.5em;
    padding-top:1em;
    margin-top:-.6em;
    box-sizing: border-box;
    min-height: calc(45px + 1.5vh);
    display: flex;
    align-items: center;
    font-size:0.9em;
}
#quoteNPCQuoteText, #quoteNPCNameText{ margin:0;}
#quoteNPCQuoteText i{ font-size:0.55em; }

.event-item-title{
    margin-bottom:2px;
    margin-top:4px;
    font-size:1.25em;
}
.event-item-subtitle{
    margin-top:2px;
    margin-bottom:5px;
    font-size:0.85em;
    font-style: italic;
}
.event-item-time{
    font-weight: 600;
    margin:0;
}
.event-item-desc{
    font-size:0.8em;
    font-style: italic;
    width:calc(90% - 20px);
}
.event-item-entry{
    position:relative;
    display:flex;
    padding:0.2em;
    box-sizing: border-box;
}


/** LIGHT THEME **/
.theme-light #playerdisplayhand, .theme-light #quoteNPCDisplay{
    width:100%;
	background-color:var(--color-body-background);
    background-image:url(../images/background.png);
	background-size:122px 95px;
}
.theme-light body{
	background-color:var(--color-body-background);
	background-image:var(--background-zigzag);
	background-size:62px 62px;
	background-position:31px 0, 31px 0, 0 0, 0 0!important;
}

.theme-light .newsbox-entry{
    background-color: var(--color-box-background);
    color: var(--color-body-background-alt);
    border:2px solid var(--color-button-border);
}

.theme-light .newsbox-label{
    border-radius: var(--common-border-radius-sm);
    background-color: var(--color-box-background);
    padding: 5px;
    font-size:0.8em;
}
.theme-light .newsbox-titlebox{ background-color: var(--color-button-border); }
.theme-light #newsboxcontent{ background-color:var(--color-button-outline); }
.theme-light .box{
    color: var(--color-text-dark);
    background-color:var(--color-box-background);
    border:2px solid var(--color-box-border);
}
.theme-light .box-divider{ background-color:var(--color-button-outline); }
.theme-light .popup-section-description{ color:var(--color-main-alt); }
.theme-light .event-item-subtitle{ color:var(--color-main-alt); }

/** DARK THEME **/
.theme-dark #playerdisplayhand, .theme-dark #quoteNPCDisplay{
    width:100%;
	background-image:var(--background-zigzag);
	background-position:31px 0, 31px 0, 0 0, 0 0;
	background-size:62px 62px;
}

.theme-dark body{
	background-color:var(--color-body-background);
    background-image:url(../images/background.png);
}

.theme-dark .newsbox-entry{
    color: var(--color-box-background);
    background-color: var(--color-body-background);
    border:2px solid var(--color-main);
}

.theme-dark .newsbox-label{
    border-radius: var(--common-border-radius-sm);
    background-color: var(--color-body-background-alt);
    padding: 5px;
    font-size:0.8em;
}
.theme-dark .newsbox-titlebox{ background-color: var(--color-main); }
.theme-dark .box{
    color: var(--color-text-light);
    background-color:var(--color-body-background);
    border:2px solid var(--color-box-border);
}
.theme-dark .box-divider{ background-color:var(--color-button-border); }
.theme-dark .popup-section-description{ color:var(--color-button-border); }
.theme-dark .event-item-subtitle{ color:var(--color-button-border); }