/* ########################################################################## */
/* Core things */
/* ########################################################################## */

:root {
	--white: #eee;
	--text: #454649;
	--grey: #c6bccb;
	--bg: #5e3671;
	--prim1: #531b6d;
	--link1: #9a45c1;
	--link2: #3061de;
	--secondary: #0fe0ff;
	--radi1: 8px;
	--radi2: 24px;
	--dummy: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"></svg>');
}

@font-face {
	font-family: 'Main';
	src: url('./images/main.woff2') format('woff2');
	font-weight: normal; font-style: normal;
	font-synthesis: weight style;
}
@font-face {
	font-family: 'Main';
	src: url('./images/main-bold.woff2') format('woff2');
	font-weight: bold; font-style: normal;
	font-synthesis: weight style;
}
@font-face {
	font-family: 'Main';
	src: url('./images/main-italic.woff2') format('woff2');
	font-weight: normal; font-style: italic;
	font-synthesis: weight style;
}
@font-face {
	font-family: 'Code';
	src: url('./images/code.woff2') format('woff2');
	font-weight: normal; font-style: normal;
	font-synthesis: weight style;
}
@font-face {
	font-family: 'Code';
	src: url('./images/code-bold.woff2') format('woff2');
	font-weight: bold; font-style: normal;
	font-synthesis: weight style;
}
@font-face {
	font-family: 'Head';
	src: url('./images/extra.ttf') format('truetype');
	font-weight: normal; font-style: normal;
	font-synthesis: weight style;
}
@font-face {
    font-family: "Emoji";
    src: url("./images/emoji.ttf") format("truetype");
    font-weight: bold; font-style: normal;
    font-synethesis: weight style;
}

*{ 
	outline: none; border: none; 
	margin: 0; padding: 0;
}

*:focus-visible{
	outline: 3px double var(--secondary) !important;
}


body { font-family: "Main", Tahoma, sans-serif; font-size: 16px; }
article p, article li{ line-height: 28px; }
	
h1 { font-family: "Head", Tahoma, sans-serif; font-size: 180%; line-height: 48px; margin-bottom: 8px;
	mask: url("./images/bg_stampmask.png") luminance exclude, linear-gradient(white 0 0);
	mask-clip: no-clip;
    border-image: url("./images/bg_headerframe.png") 32 repeat;
    border-image-width: 64px;
    border-image-outset: 4px;
	padding: 0 16px;
	display: inline-block;
	clear: both;
}
h2, h3 { font-size: 150%; font-weight: bold; margin-bottom: 4px; padding-top: 8px; }
h3 {  font-size: 130%; font-weight: unset; }

p{ margin-bottom: 12px; text-align: justify; }
pre, code{
	font-family: "Code", monospace; font-variant-ligatures: none;
	white-space: pre-wrap;
	tab-size: 2;
}
pre{ display: block; }
code{ display: inline; }

abbr{ text-decoration: none; border-bottom: 1px dotted var(--text); cursor: pointer; }

ul{ margin-left: 4px; margin-bottom: 12px; }
li{ padding-left: 10px; margin-left: 16px; margin-bottom: 2px; }
blockquote{ margin: 0 0 12px 12px; padding-left: 8px; border-left: 3px double var(--grey); }

a{ color: var(--secondary); text-decoration: none; font-weight: bold; 
    border-image: none 48 repeat;
    border-image-width: 0px;
    border-image-outset: 8px;
}
a:hover{ color: inherit; 
    border-bottom: 0 solid transparent;
}
a, a img, label{ transition: all 0.2s ease-in-out; }
@media (prefers-reduced-motion) { a, a img, label{ transition: unset; } }

::selection   		{ background: var(--link1); color: var(--white); text-shadow: none; }
img::selection		{ background: none; color: #0000; }

div, span, header, section, article, footer{
	color: inherit;
	box-sizing: border-box;
}

/* ########################################################################## */
/* Core layout elements */
/* ########################################################################## */

html{
	color: var(--white); background-color: var(--bg);
	width: 100%; min-height: 100%; display: flex; 
	background-image: url("./images/bg_horizon.png"), url("./images/bg_border.webp"), url("./images/bg_border.webp");
	background-position: bottom, calc(0% - 200px) top, calc(100% + 200px) top;
    background-origin: padding-box;
	background-repeat: repeat-x, no-repeat, no-repeat;
}
body{
	width: 100%; min-height: 100%; display: block;
	position: relative;
}

footer{ 
	width: 100%; font-size: 14px;
	margin: 0 auto 12px auto;
}
footer p, footer li{ text-shadow: 0 -1px 0 var(--prim1); line-height: 19px; }
footer #columns{ display: flex; gap: 24px; margin-top: 16px; }
footer #columns div{ flex-basis: 50%; flex-grow: 1; }

footer h3, .error h3 a{ 
	display: flex; justify-content: center;
	padding: 0; gap: 6px;
	text-transform: uppercase; text-align: center;
}
footer h3 a, .error h3 a{ padding: 0 8px; min-width: 190px; line-height: 40px; background: var(--secondary); color: var(--bg); border-radius: var(--radi1); display: inline-block; }
footer h3 a:hover, .error h3 a:hover{ background: var(--white); color: var(--bg); }

footer ul{ margin: 0; }
footer li{ list-style: none; line-height: 14px; }
footer li{ padding: 0; margin: 0 0 4px 0; }
footer li a{ display: block; padding: 2px 0; border-radius: 0; background: none; border-bottom: 1px dotted var(--secondary); }
footer li a:hover{ background: none; border-bottom: 1px solid var(--white); }

footer h3.banners{
	display: block; margin: auto;
	line-height: 0;
}
footer h3.banners img{
	margin: 2px;
}
footer h3.banners a{ background: unset; padding: unset; margin: unset; min-width: unset; }

/* ########################################################################## */
/* Index */
/* ########################################################################## */

section#index_frame{
	background: url("./images/index_side.webp") no-repeat -140px bottom;
	width: 100%; min-height: 100%;
	display: block;
}

header#index_header{
	background: url("./images/header_logo.webp") no-repeat center;
	width: 100%; height: 170px;
	display: block;
}

div#index_content{
	width: 992px; margin: 0 120px 0 auto; padding: 0 24px;
}

#index_tabs{
	width: 100%; min-height: 380px; padding: 0 48px;
	display: grid;
	grid-template-areas:
		'tab_a tab_b tab_c'
		'page page page';
	grid-template-rows: 40px 100%;
	gap: 4px;
}
#index_tabs input{ opacity: 0; cursor: pointer; }
#index_tabs label{
	display: inline-block;
	margin-bottom: 4px;
	font-size: 150%; font-weight: bold; text-shadow: 0 -1px 0 var(--prim1);
	text-transform: uppercase; text-align: center;
	line-height: 40px; height: 40px;
	border-bottom: 2px dotted var(--secondary); color: var(--secondary);
	border-radius: var(--radi1) var(--radi1) 0 0;
}
#index_tabs > #label1, #tab1{ grid-area: tab_a; }
#index_tabs > #label2, #tab2{ grid-area: tab_b; }
#index_tabs > #label3, #tab3{ grid-area: tab_c; }

#index_tabs > input:checked + label{
	background: var(--secondary); color: var(--bg); text-shadow: none;
}
#index_tabs > input:is(:hover, :focus-visible) + label{
	background: var(--white); color: var(--bg); text-shadow: none;
	border-bottom-color: var(--white);
}

#index_tabs > .tab {
	margin-top: 8px; min-height: 380px;
	transition: all 0.2s ease-out;
	opacity: 0;
	display: none;
	grid-area: page;
}
#index_tabs > #tab1:checked ~ #page1,
#index_tabs > #tab2:checked ~ #page2,
#index_tabs > #tab3:checked ~ #page3{
	opacity: 1;
	display: block;
}

/* ########################################################################## */
/* Index elements */
/* ########################################################################## */

/*#index_feature{
	width: 460px; height: 600px; margin: auto;
	background: url("./images/sitefeatured.png") no-repeat;
	position: relative;
}
#index_feature .star{	
	width: 744px; height: 744px;
	display: block; position: absolute;
	transform: translate(-50%, -50%) scale(0.34) rotate(-53deg); transform-origin: 50% 50%;
	top: 127px; left: 151px;
}
#index_feature .star:before{
	content: "";
	background: url("./thumb/voicesomeonecalls.jpg") no-repeat;
	background-position: 50% 50%; background-size: auto 100%;
	width: 100%; height: 100%; 
	
	mask: url("./images/star1.png") no-repeat center center;
	mask-size: auto 100%; backface-visibility: hidden;
	position: absolute; z-index: -5;
}
#index_feature .star .out{
	width: 100%; height: 100%; display: block; 
	background: url("./images/star2.png");
}
#index_feature .star:hover{
	transform: translate(-50%, -50%) scale(0.4) rotate(-53deg);
}*/

#index_links{
	position: relative;
	text-transform: uppercase; text-align: center;
}
#index_links a{ 
	display: block; position: absolute;
	box-sizing: border-box;
	font-size: 180%; 
	width: 50%;
	color: var(--secondary);
	/*background-color: #f001;*/
	background-repeat: no-repeat;
	background-size: auto 200%;
	background-position: center top;
	padding: 0 32px 8px;
	
	transition: none;

	/*backdrop-filter: blur(2px);*/
	
}
#index_links a:hover{ 
	color: var(--bg);
	background-position: center bottom;
}

#index_links a:nth-child(odd){ text-align: right; }
#index_links a:nth-child(even){ text-align: left; }

a#il_art{ 
	background-image: url("./images/index_linkart.webp"); top: 0; left: 0; 
	width: 51%; line-height: 150px; 
}
a#il_blog{ 
	background-image: url("./images/index_linkblog.webp"); top: 6px; right: 0;  
	width: 48%; line-height: 115px;
}
a#il_games{ 
	background-image: url("./images/index_linkgames.webp"); top: 145px; left: 0; 
	width: 51%; line-height: 120px; padding: 0 32px 32px;
}
a#il_chars{ 
	background-image: url("./images/index_linkchars.webp"); top: 125px; right: 0; 
	width: 43%; line-height: 125px; 
}
a#il_else{ 
	background-image: url("./images/index_linkelse.webp"); top: 260px; right: 0; 
	width: 61%; line-height: 72px; font-size: 140%;
}


#index_about{
	text-shadow: 0 -1px 0 var(--prim1);
	width: 70%; margin: auto;
}
#index_about h1{ border-image: unset; padding: unset; margin: unset; }

#index_about #contacts{
	display: flex; margin-top: 8px;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

#index_about #contacts a{
	background: var(--prim1);
	display: inline-block; box-sizing: border-box;
	flex-basis: 15%; flex-grow: 1; height: 92px; border-radius: var(--radi1);
	position: relative; overflow: hidden;
}
#index_about #contacts a::before{
	background: url("./images/contacts.webp");
	background-size: auto 300%;
	position: absolute; left: calc(50% - 46px); content: ''; z-index: 0;
	width: 92px; height: 92px;
}
#index_about #contacts a:hover{
	background-color: var(--link2);
}
#index_about #contacts a#ic_email::before{ background-position: 0px -92px; }
#index_about #contacts a#ic_fa::before{ background-position: 0px 0px; }
#index_about #contacts a#ic_weasyl::before{ background-position: -184px 0px; }
#index_about #contacts a#ic_tumblr::before{ background-position: -92px 184px; }
#index_about #contacts a#ic_cohost::before{ background-position: 0px 92px; }
#index_about #contacts a#ic_youtube::before{ background-position: -184px 92px; }
#index_about #contacts a#ic_bluesky::before{ background-position: -92px 0px; }

/* ########################################################################## */
/* Common */
/* ########################################################################## */

section#common_frame{
	width: 100%;
}

header#common_headersill{
	background-image: url("./images/header_sill.png"), var(--dummy);
	background-repeat: repeat-x;
	width: 100%; height: 416px; 
	margin-bottom: -110px;
	
	display: grid;
	grid-template-areas:
		'elem';
}

header#common_sky {
	background-image: url("./images/header_fog1.png"), url("./images/header_fog2.png"), url("./images/header_sky.jpg");
	background-repeat: repeat, repeat, no-repeat;
	background-size: auto auto, auto auto, 100%;
	background-blend-mode: soft-light, soft-light, normal;
	animation: skybox 36s linear infinite;
	width: 100%; height: 316px; display: block;
	margin: 0 auto;
	contain: paint;
	grid-area: elem;
	z-index: -5;
}
@keyframes "skybox" {
	0% 	 { background-position: left top, left top, center top; } 
	100% { background-position: calc(-512px*2) calc(-512px*1), calc(-512px*8) top, center top; }
} 

header#common_header{
	background-image: url("./images/header_logo.webp"), url("./images/header_aether.webp"), url("./images/header_sill.png");
	background-position: 96% 60%, 0 center, center top;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: auto 80px, auto 100%, auto auto;
	width: 1080px; height: 100%; margin: auto;
	
	grid-area: elem; 
	z-index: 0;
}

span#common_mobile1, span#common_mobile2{
	background: none;
	width: 1600px; height: 510px; 
	contain: paint;
	grid-area: elem;
	zoom: 50%;
	z-index: 5;
}
span#common_mobile2 {
	width: 900px; margin-left: auto;
}

header img{ top: 0; position: absolute; transform-origin: 50% 0%; }
header .l1{ left: 0px; }
header .l2{ left: 95px; }
header .l3{ left: 580px; }
header .l4{ left: 881px; }
header .l5{ left: 1367px; }
header .l6{ right: 807px; }
header .l7{ right: 442px; }
header .l8{ right: 230px; }
header .l9{ right: 0px; }

header .thread{ top: -3px; height: 432px; }
header .t1{ left: 89px; height: 370px; width: 10px; animation: t1a 3.3s ease-in-out infinite; }
header .t2{ left: 575px; animation: t1a 3.6s ease-in-out infinite; }
header .t3{ left: 875px; height: 218px; width: 7px; animation: t1a 4.2s ease-in-out infinite; }
header .t4{ left: 1362px; height: 358px; animation: t1a 5s ease-in-out infinite; }
header .t5{ right: 801px; height: 168px; width: 8px; animation: t5a 3.5s linear infinite; }
header .t6{ right: 443px; height: 260px; width: 10px; animation: t1a 7s ease-in-out infinite; }
header .t7{ right: 224px; height: 344px; animation: t1a 5.6s ease-in-out infinite; }

header .s1{ left: 72px; top: 292px; transform-origin: 50% 10%; animation: s1a 3.3s ease-in-out infinite; }
header .s2{ left: 539px; top: 382px; transform-origin: 50% 10%; animation: s2a 3.6s ease-in-out infinite; }
header .s3{ left: 818px; top: 192px; transform-origin: 50% 10%; animation: s3a 4.2s ease-in-out infinite; }
header .s4{ left: 1328px; top: 300px; transform-origin: 50% 10%; animation: s4a 5s ease-in-out infinite; }
header .s5{ right: 782px; top: 120px; transform-origin: 50% 10%; animation: s5a 3.5s linear infinite; }
header .s6{ right: 412px; top: 244px; transform-origin: 50% 10%; animation: s6a 7s ease-in-out infinite; }
header .s7{ right: 196px; top: 270px; transform-origin: 50% 10%; animation: s7a 5.6s ease-in-out infinite; }

@keyframes "t1a" {
	0% 	 { transform: skew(-1deg); }
	50% { transform: skew(1deg); }
	100% { transform: skew(-1deg); }
} 
@keyframes "t5a" {
	0% 	 { transform: skew(-2deg); }
	50% { transform: skew(2deg); }
	100% { transform: skew(-2deg); }
}
@keyframes "s1a" {
	0% 	 { transform: translateX(-2.4px) rotate(30deg)  scaleX(1); }
	50% { transform: translateX(2.8px) rotate(31deg)  scaleX(0.93); }
	100% { transform: translateX(-2.4px) rotate(30deg)  scaleX(1); }
} 
@keyframes "s2a" {
	0% 	 { transform: translateX(-3.1px) rotate(11deg); }
	50% { transform: translateX(3.0px) rotate(9deg); }
	100% { transform: translateX(-3.1px) rotate(11deg); }
} 
@keyframes "s3a" {
	0% 	 { transform: translateX(-1.4px) rotate(-18deg) scaleX(1); }
	50% { transform: translateX(1.8px) rotate(-17.5deg) scaleX(0.82); }
	100% { transform: translateX(-1.4px) rotate(-18deg) scaleX(1); }
} 
@keyframes "s4a" {
	0% 	 { transform: translateX(-1.1px) rotate(14deg)  scaleX(1); }
	50% { transform: translateX(3.8px) rotate(12deg) scaleX(0.86); }
	100% { transform: translateX(-1.1px) rotate(14deg)  scaleX(1); }
} 
@keyframes "s5a" {
	0% 	 { transform: translateX(-2.4px) rotate(-29deg) scaleX(1); }
	50% { transform: translateX(2.2px) rotate(-28.6deg) scaleX(0.95); }
	100% { transform: translateX(-2.4px) rotate(-29deg) scaleX(1); }
} 
@keyframes "s6a" {
	0% 	 { transform: translateX(-2.4px) rotate(-18deg) scaleX(1); }
	50% { transform: translateX(2.8px) rotate(-18deg) scaleX(0.82); }
	100% { transform: translateX(-2.4px) rotate(-18deg) scaleX(1); }
} 
@keyframes "s7a" {
	0% 	 { transform: translateX(-2.4px) rotate(-24deg) scaleX(1); }
	50% { transform: translateX(2.8px) rotate(-21.5deg) scaleX(0.88); }
	100% { transform: translateX(-2.4px) rotate(-24deg) scaleX(1); }
} 
div#common_content{
	width: 992px; margin: auto; padding: 0 24px;
	position: relative; z-index: 2;
}

/* ########################################################################## */
/* Gallery index */
/* ########################################################################## */

section#gallery_listing{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

#gallery_listing a{
	display: inline-block; box-sizing: border-box;
	flex-basis: calc(33.333% - 8px); flex-grow: 1;
	line-height: 0;
	filter: saturate(65%);
	border-image-source: url("images/linkstar.gif");
	opacity: 0.8;
}
#index_feature #gallery_listing{
	margin: 0 32px;
}
#index_feature #gallery_listing a{
	flex-basis: calc(50% - 8px); flex-grow: 1;
}
.comm .art{
	filter: saturate(65%);
	border-image-source: url("images/linkstar.gif");
}
#gallery_listing a:hover, .comm .art:hover{
	opacity: 1;
	filter: saturate(115%);
	transform: rotate(-2deg) scale(1.06);
	border-image-width: 48px;
	border-image-outset: 20px;
	z-index: 5;
}
#gallery_listing a:hover img, .comm .art:hover img{
	box-shadow: 0 0 0 4px var(--secondary);
}
#gallery_listing a img{
	width: 100%; border-radius: var(--radi1);
}

/* ########################################################################## */
/* Artwork page + common post behaviour */
/* ########################################################################## */

div#common_artpost{
	width: 100%; position: relative;
    padding: 24px 32px;
	background-color: var(--white);
    background-image: url("./images/bg_paperstar.png"), url("./images/bg_paper1.jpg");
	background-position: 110% -110px, left top;
	background-repeat: no-repeat, repeat;
	clear: both;
}
div#common_artpost, div#blog_flex{
    border-radius: var(--radi2);
    box-shadow: 0 6px 2px var(--prim1);
	margin: 0 auto 24px auto;
    color: var(--text);
	contain: paint;
}

.misc_content{ margin: 32px auto !important; }

article{ contain: layout; }

article .artfull{
	margin: 0 auto 12px auto; padding: 1px; 
	border: 2px solid var(--grey);
	display: block; box-sizing: border-box;
	max-width: 100%;
}
article .noborder{
	border-color: transparent;
}
article .noauto{
	display: inline-block; margin: 0 6px;
}

article a{ color: var(--link1); text-decoration: none; font-weight: bold; border-image-source: url("images/linkstar.gif"); }
article a:hover{ color: var(--link2); text-decoration: underline; border-image-width: 24px; position: relative; z-index: 5; }
article a:has(img){ border-image-source: unset; }

article h1 a{ color: unset; text-decoration: none; }
article h1 a:hover{ color: var(--link2); }

article hr { border-top: 3px double var(--grey); margin: 16px 0; padding: 0; }

article a img{ border-color: var(--link1) !important; }
article a img:hover{ border-color: var(--link2) !important; }

article .avatar{
	/*
	display: inline-block; float: left;
	margin: 4px 14px 14px 0; padding: 1px;
	border: 2px solid var(--grey);
	*/
	display: none;
}

article pre.codeblock { 
	display: block; position: relative;
	background: #e6e6e6; border-radius: var(--radi1); 
	box-shadow: 0 -2px 0 var(--grey); border: 1px solid var(--grey);
	border-bottom: 3px solid #fff;
	line-height: 20px;
	white-space: pre; overflow: hidden;
	margin-bottom: 8px;
}

article pre.codeblock code{ 
	background: repeating-linear-gradient(to bottom, transparent 0 20px, #fff6 20px 40px); background-attachment: local;
	display: block; padding: 0 8px; 
	max-height: calc(20px * 17); 
	overflow:auto;
}
/*
pre.codeblock code::before, pre.codeblock code::after{
	content: ''; pointer-events: none;
	position: absolute;
	right: 16px; top: 0;
	width: 100%; height: 18px; /*#e6e6e6/
	background: linear-gradient(to top, transparent, red 16px);
}
pre.codeblock code::after {
	top: unset; bottom: 0;
	background: linear-gradient(to bottom, transparent, red 16px);
}*/

.meta{
	font-size: 90%; line-height: 20px;
	text-shadow: none; /* Re: My RPG!! page */
	margin: 16px 0 0 0; 
	bottom: 0;
	clear: both;
}

.meta label{
	color: var(--white);
	background: #9b89a5;
	text-align: center; 
	font-family: "Emoji", "Main" !important; text-transform: uppercase;
	width: 98px; line-height: 21px;
	margin-right: 8px;
	display: inline-block;
	box-sizing: border-box;
}

.meta li{ list-style: none; padding: 0; margin: 0 0 2px 0; line-height: 20px; border-bottom: 1px dotted #9b89a5; }
label.d, label.t, label.to{ border-radius: var(--radi1) var(--radi1) 0 0; }
.meta li a{ font-weight: bold; text-decoration: none; }

/* ########################################################################## */
/* Blog page */
/* ########################################################################## */

div#blog_flex{
	display: grid;
	grid-template-areas:
		'left right';
	grid-template-columns: auto 270px;
}

div#blog_left{
    padding: 24px 32px;
	background-color: var(--white);
    background-image: url("./images/bg_paperstar.png"), url("./images/bg_paper1.jpg");
	background-position: -40px -100px, left top;
	background-repeat: no-repeat, repeat;
	
}

div#blog_left article.is_full{
    background-image: url("./images/bg_paperstar2.png"), var(--dummy);
	background-position: 100% 100%;
	background-size: 20%;
	background-repeat: no-repeat;

	
    /*border-image: url("./images/bg_paperborder1.png") 64 fill;
    border-image-width: 64px;
	border-image-outset: 48px;
	border-image-repeat: repeat;*/
}

div.blog_full{
	display: block !important; grid-template-areas: unset;
}
div.blog_full article.is_full{
	background-size: 15% !important;
}

div#blog_right{
    padding: 12px 18px; border-left: 3px double var(--grey);
    background-image: url("./images/bg_paper2.jpg"), var(--dummy);
}

div#blog_right p{
	text-align: left;
}

div#blog_right ul{ margin: 0; font-size: 13px; }
div#blog_right li{ list-style: none; padding: 0; margin: 0 0 4px 0; }
div#blog_right li a{ display: block; font-weight: bold; color: var(--link1); border-bottom: 1px dotted var(--link1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
div#blog_right li a:hover{ color: var(--link2); border-bottom: 1px solid var(--link2); }

.blog_hr{
	border-bottom: 3px double var(--grey); margin: 16px 0;
}

/* ########################################################################## */
/* Misc nav/admin elements */
/* ########################################################################## */

.error{
	background: var(--bg);
	display: flex; flex-direction: column;
	justify-content: center; align-items: center; 
	width: 100%; height: 100%;
}

.error #errorbox{
	width: 600px; text-align: center;
	padding: 32px;
}
.error #errorbox img{
	width: 400px; height: auto; max-width: calc(100%);
}
.error #errorbox h3{ margin: 0 auto; }
.error #errorbox a{ margin: 0; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }

#admin { margin: 0; padding: 0; box-sizing: border-box; }
#admin li{ margin: 0; padding: 2px; list-style: none; width: calc(20%); display: inline-block; box-sizing: border-box; }
#admin li a{ display: block; line-height: normal; text-decoration: none; }

#admin li a span{ height: 24px; line-height: 24px; padding: 0 4px; display: block; }
#admin li a span:nth-child(1){ font-size: 13px; font-weight: normal; border-bottom: 1px dotted var(--link1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin li a span:nth-child(2){ font-weight: normal; font-size: 10px; text-align: right; }
	
#admin li a{ padding: 0; background: none; border: 1px dotted var(--link1); }
#admin li a:hover{ background: none; border: 1px solid var(--link2); }
#admin li a:hover span:nth-child(1){ border-bottom: 1px solid var(--link2); }

/* ########################################################################## */
/* Wiki elements */
/* ########################################################################## */

#wiki_char, .game_links, .misc_links{
	display: flex; margin: auto; list-style: none;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

#wiki_char a, .game_links a, .misc_links a{
	display: inline-block; box-sizing: border-box;
	background-color: var(--link1);
	background-repeat: no-repeat; background-position: 16px center;
	background-blend-mode: overlay;
	flex-basis: calc(30% - 4px); flex-grow: 1;
	line-height: 48px; border-radius: var(--radi1);
	text-align: right; color: var(--white); padding: 0 16px;
	white-space: nowrap; overflow-x: hidden;
}
#index_about .misc_links a{ background-color: var(--prim1); }
.game_links{ margin-bottom: 8px; }
.game_links a{ text-align: center; cursor: pointer; /* TWEWY romhack fix */ }
.misc_links a{ text-align: center; line-height: 21px; padding: 8px 0; }
.game_logo{
	width: 70%; height: auto; margin: 0 auto 8px auto;
}
.game_screen{ 
	float: right; width: 35%; height: auto; 
	margin: 0 auto 12px 16px; padding: 1px; 
	border: 2px solid var(--grey);
	display: block; box-sizing: border-box;
	clear: both;
}

#wiki_char a:hover, .game_links a:hover, .misc_links a:hover, #index_about .misc_links a:hover{
	background-color: var(--link2); color: var(--white);
}

.wiki_quote{ margin: 0 0 10px 20px; }
.wiki_quote blockquote{ border-left: none; margin: 0; padding: 0; }
.wiki_quote blockquote p{ margin: 0; font-style: italic; }

.spoiler_bar{
	border-top: 3px double var(--link1);
	border-bottom: 3px double var(--link1);
	display: flow-root; font-style: italic;
	margin: 16px 0; padding: 16px;
}
.spoiler_bar b{
	color: #d00;
}

.infobox, .comm{
	border: 3px double var(--grey);
    background: var(--white) url("./images/bg_paper2.jpg");
	border-radius: var(--radi1); overflow: hidden;
	margin: 0 0 12px 16px;
	float: right; 
	box-sizing: border-box;
	width: 32%; font-size: 14px;
}
.infobox.full{
	width: 100%;
	float:none;
	margin: 8px 0;
}
.infoxbox_fix{ border: none; margin: 0; line-height: 0; display: block; }

.infobox span{ display: inline-block; line-height: 26px; padding: 0 2px; }
.infobox span.fbrow{ display: block; text-align: center; }
.infobox .info{
	display: flex; gap: 2px;
	flex-direction: row;
	flex-wrap: wrap;
}
.infobox .head, .infobox .label{ background: #9b89a5; color: var(--white); font-weight: bold; }
.infobox .head{ display: block; flex-basis: 100%; text-align: center; }
.infobox .label{ width: 35%; }
.infobox .data{ width: 64%; }
.infobox .data.full{
	width: 100%;
}

.infobox .profileimg{
	margin: 2px auto;
	display: block; /*width: 240px; height: auto;*/
	max-width: 240px; max-height: 500px;
}

.infobox.inlineimg{ background: none; border: none; width: 240px; }
.infobox.inlineimg .profileimg{ border-radius: 8px; max-width: 240px; }
.infobox.inlineimg .caption{ text-align: center; line-height: 16px; }

.infobox.align_left{ float: left; }
.infobox.align_right{ float: right; }
.infobox.align_centre{ float: none; margin: auto; }

.redlink{ color: #d00; cursor: pointer; }
.redlink:hover{ color: #d00; }

.comm{ 
	margin: auto; float: unset; width: 80%; 
	display: flex; gap: 2px;
	flex-direction: column; flex-wrap: wrap;
	overflow: visible;
}

/* ########################################################################## */
/* Misc elements */
/* ########################################################################## */

.affiliates{
	line-height: 0px;
	display: flex;
	flex-wrap: wrap; justify-content: center;
	gap: 4px;
	margin-bottom: 12px;
}

.affiliates a{
	display: inline-block; box-sizing: border-box;
	flex-basis: 176px;
	border-image-source: url("images/linkstar.gif");
	outline: 4px solid transparent;
	z-index: 0;
}
.affiliates a:hover{ 
	outline: 4px solid var(--secondary); transform: rotate(2deg) scale(1.06); 
	z-index: 5;
	border-image-width: 48px;
	border-image-outset: 20px; 
}

.affiliates a.rev{
	min-width: 400px;
}
.affiliates a img{
	width: 100%; image-rendering: pixelated;
}

/* Future note: entries use border radius because using clip/hidden overflow on parent instead also clips image hover */
.comm .entry{ display: flex; flex-direction: row; flex-grow: 1; /*flex-basis: calc(50% - 1px);*/ align-items: center; gap: 2px; }
.comm .entry span, .entry img{ border-radius: 4px; display: flex; align-self: stretch; align-items: center; }
.comm .entry .type{ padding: 8px 4px; color: var(--white); font-weight: bold; background: #9b89a5; flex-basis: 50%;  }
.comm .entry * p{ line-height: unset; text-align: center; margin: auto; }
.comm .entry .price{ background: var(--grey); padding: 8px 4px; font-size: 150%; font-weight: bold; flex-grow: 1; text-align: center; }
.comm .entry .price a{ display: block; margin: auto; }
.comm .entry .art { align-self: center; height: auto; }
.comm .entry .art img{ width: auto; height: 110px; }


.twewyscreen{ width: 35%; display: inline;
	padding: 1px; margin: 0 2px;
	border: 2px solid var(--grey);
}
@media (max-width: 1028px) {
	.twewyscreen{
		width: 70%;
	}
}

.twewytable{
	width: 100%; text-align: left;
	border: 1px solid var(--grey);
	border-collapse: collapse;
}

.twewytable th, .twewytable td{
	width: 20%; padding: 0 2px;
	border: 1px solid var(--grey);
	font-size: 14px;
}

.twewytable th{	
	background-color: var(--bg);
	color: var(--white);
}

.twewytable td:nth-child(1){
	font-weight: bold;
}

.twewytable td:nth-child(4) {
	background-color: var(--secondary);
}

.twewytable td:nth-child(5) {
	font-size: 12px;
}