@charset "utf-8";

/* ----------------------------------------------------------
   TYPO
   ---------------------------------------------------------- */

body{
	color:#000;
	font-family:"Nunito";
	font-size:100%;
	font-weight:500;
	margin:0;
}

h1,h2,h3,.brand{
	font-family:"Fredoka";
}

/* ----------------------------------------------------------
   FONTS
   ---------------------------------------------------------- */

@font-face{
	font-family:"Fredoka";
	src:
			url("/fonts/fredoka/Fredoka-Regular.woff2") format("woff2"),
			url("/fonts/fredoka/Fredoka-Regular.ttf") format("truetype");
	font-weight:400;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Fredoka";
	src:
			url("/fonts/fredoka/Fredoka-SemiBold.woff2") format("woff2"),
			url("/fonts/fredoka/Fredoka-SemiBold.ttf") format("truetype");
	font-weight:600;
	font-style:normal;
	font-display:swap;
}

@font-face{
	font-family:"Nunito";
	src:
			url("/fonts/nunito/Nunito-Regular.woff2") format("woff2"),
			url("/fonts/nunito/Nunito-Regular.ttf") format("truetype");
	font-weight:400;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Nunito";
	src:
			url("/fonts/nunito/Nunito-Medium.woff2") format("woff2"),
			url("/fonts/nunito/Nunito-Medium.ttf") format("truetype");
	font-weight:500;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Nunito";
	src:
			url("/fonts/nunito/Nunito-SemiBold.woff2") format("woff2"),
			url("/fonts/nunito/Nunito-SemiBold.ttf") format("truetype");
	font-weight:600;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Nunito";
	src:
			url("/fonts/nunito/Nunito-Bold.woff2") format("woff2"),
			url("/fonts/nunito/Nunito-Bold.ttf") format("truetype");
	font-weight:700;
	font-style:normal;
	font-display:swap;
}

/* ----------------------------------------------------------
   HELPERS / SURFACES
   ---------------------------------------------------------- */

.inDiv{ border:2px inset #cff; }
.outDiv{ border:2px outset #cff; }

.lighterDiv{
	background-color: rgba(255,255,255,0.3);
	border: solid rgba(255,255,255,0.2) 1px;
	box-shadow:0 0 8px rgba(255,255,255,0.12);
}

.darkerDiv{ background-color: rgba(0,0,0,0.3); }
.darkestDiv{ background-color: rgba(0,0,0,0.6); }

.slimRoundDiv{
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
}
.slightRoundDiv{ border-radius:5px; }

.linkText{ cursor:pointer; color:#000099; }
.linkText:hover{ color:#4444bb; text-decoration:underline; }

.mainBackground{
	background:#cd75087a;
	background-size:cover;
}

.layer-star{
	background:url(/img/layout/background/theme_0/star_pattern.png) repeat;
	opacity:0.5;
	position:fixed;
	inset:0;
	z-index:-1;
	background-size:512px 512px;
	pointer-events:none;
}

.deleteButton{
	margin:0 5px;
	padding:0 5px;
	background:white;
	border:2px solid red;
	color:red;
	cursor:pointer;
}

.logo {
	width:50px;
	cursor:pointer;
}
.logo:hover{
	filter:brightness(1.1);
	transform:translateY(-1px);
}

/* ----------------------------------------------------------
   FORMS / INPUT BASE
   ---------------------------------------------------------- */

::placeholder{ color:#cbcbcb; }

input, textarea{
	color:#fff;
	text-shadow: 0 -1px #404040, 1px 0 #404040, 0 1px #404040, -1px 0 #404040, 0.1em 0.12em 0.15em black;
	background-color:#55555555;
	border-radius:10px;
	padding:5px;
	outline:none;
}

/* unified styled controls */
.uiInput,
.uiBtn,
.uiSelect{
	font-family:"Nunito";
	font-weight:bold;
	font-size:100%;
	color:rgba(255,255,255,.92);

	text-shadow:
			0 -1px #404040,
			1px 0 #404040,
			0 1px #404040,
			-1px 0 #404040,
			0.1em 0.12em 0.15em black;

	border-radius:10px;
	outline:none;
	transition:all .18s ease-out;
	box-sizing:border-box;
}

/* INPUT */
.uiInput{
	background-color:rgba(60,60,60,.55);
	border:1px solid rgba(255,255,255,.22);
	padding:5px 10px;
	box-shadow:
			inset 0 1px 0 rgba(255,255,255,.12),
			inset 0 -2px 3px rgba(0,0,0,.22),
			0 1px 2px rgba(0,0,0,.30);
}

.uiInput:focus{
	background-color:rgba(75,75,75,.65);
	border-color:rgba(255,255,255,.35);
	box-shadow:
			inset 0 1px 0 rgba(255,255,255,.16),
			inset 0 -2px 5px rgba(0,0,0,.28),
			0 0 0 2px rgba(255,255,255,.08),
			0 2px 4px rgba(0,0,0,.32);
}

.uiInput.searchInput{
	padding-left:34px;
	background-image:url('/img/gui/ui/search_icon.png');
	background-repeat:no-repeat;
	background-position:12px 50%;
	background-size:16px 16px;
}

/* BUTTON */
.uiBtn{
	padding:5px 14px;
	cursor:pointer;
	user-select:none;

	background:
			radial-gradient(140% 180% at 22% 18%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
			linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.20)),
			rgba(70,70,70,.75);

	border:1px solid rgba(255,255,255,.30);

	box-shadow:
			inset 0 1px 0 rgba(255,255,255,.18),
			inset 0 -3px 6px rgba(0,0,0,.30),
			0 2px 5px rgba(0,0,0,.35),
			0 0 0 1px rgba(0,0,0,.15);
}

.uiBtn:hover{
	background:
			radial-gradient(140% 180% at 22% 18%, rgba(255,255,255,.30), rgba(255,255,255,0) 58%),
			linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.22)),
			rgba(85,85,85,.85);

	border-color:rgba(255,255,255,.42);

	box-shadow:
			inset 0 1px 0 rgba(255,255,255,.22),
			inset 0 -3px 7px rgba(0,0,0,.34),
			0 3px 6px rgba(0,0,0,.38),
			0 0 10px rgba(255,255,255,.10);
}

.uiBtn:active{
	transform:translateY(1px);
	background:
			radial-gradient(70% 80% at 50% 40%, rgba(255,255,255,.14), rgba(0,0,0,.18) 82%),
			linear-gradient(180deg, rgba(0,0,0,.28), rgba(255,255,255,.06)),
			rgba(55,55,55,.85);

	box-shadow:
			inset 0 3px 10px rgba(0,0,0,.45),
			inset 0 0 0 1px rgba(255,255,255,.10),
			0 1px 3px rgba(0,0,0,.25);
}

.uiBtn:disabled{
	opacity:.55;
	cursor:not-allowed;
	transform:none;
	box-shadow:none;
}

/* SELECT */
.uiSelect{
	cursor:pointer;
	background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), rgba(65,65,65,.70);
	border:1px solid rgba(255,255,255,.28);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.30);
}
.uiSelect:focus{
	background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.24)), rgba(80,80,80,.82);
	border-color:rgba(255,255,255,.40);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 7px rgba(0,0,0,.33), 0 3px 6px rgba(0,0,0,.35), 0 0 10px rgba(255,255,255,.10);
}
.uiSelect.isOpen{
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}
.uiSelect::-ms-expand{ display:none; }

/* ----------------------------------------------------------
   SEARCH SUGGEST (BASE)  -> width comes from desktop/mobile css
   ---------------------------------------------------------- */

.search_field{
	display:inline-block;
	background-color:#333333;
	text-align:left;
	z-index:20;
	height:inherit;
	border:1px solid rgba(255,255,255,.5);
	border-top:0;
	color:#ffffff;
	font-size:12px;
	cursor:pointer;
	font-family:"Nunito";
}

.suggest_link{
	display:flex;
	align-items:center;
	gap:8px;
	padding:6px 6px;
	background-color:#333333;
	color:#858585;
}
.suggest_link_over{
	display:flex;
	align-items:center;
	gap:8px;
	padding:6px 6px;
	background-color:#666666;
	color:#ffffff;
}

.suggest_icon{
	width:24px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	padding:2px;
	border-radius:6px;
}

.suggest_text{ flex:1 1 auto; min-width:0; }

.suggest_title{
	font-size:12px;
	line-height:16px;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.suggest_meta{
	font-size:10px;
	line-height:12px;
	margin-top:3px;
	opacity:0.75;
	color:rgba(200,200,200,0.5);
}

.searchWrap{
	position: relative;
	display: inline-block;
}

/* initial gerne etwas breiter, wird aber auf schmalen screens automatisch kleiner */
.searchWrap .searchInput{
	width: clamp(280px, 42vw, 460px);
}

/* Dropdown hängt exakt am Input und nimmt exakt dessen Breite */
.searchWrap .search_field{
	position: absolute;
	left: 0;
	top: calc(100% - 1px);     /* -1px damit Border “nahtlos” wirkt */
	width: 100%;
	box-sizing: border-box;

	/* dein Look bleibt */
	background-color: #333333;
	border: 1px solid rgba(255,255,255,.5);
	border-top: 0;
	z-index: 20;
}

/* ----------------------------------------------------------
   TABLES / CONTENT BOXES
   ---------------------------------------------------------- */

.highlightDiv{
	box-shadow: inset 0 0 0 2px #000000;
	color:#dce0f1;
	background-color:#2e3871;
	padding:10px;
	margin:2px;
}
.contentDiv{
	background-color:rgba(255,255,255,0.6);
	box-shadow: inset 0 0 0 2px #55c;
	padding:10px;
	margin:2px;
}

.fancyLine{
	border:none;
	height:1px;
	background:linear-gradient(to right, transparent, #00000099, transparent);
}

.flowTable table{
	border:1px;
	font-size:80%;
	border-right:0;
	clear:both;
}

.flowTable tr td{
	padding:0.2em;
	text-align:left;
	max-width:500px;
	vertical-align:top;
}

.flowTable tr th{
	box-shadow: inset 0 0 0 2px #000000;
	color:#dce0f1;
	background-color:#2e3871;
	padding:10px;
}

.flowTable tr{ background-color:rgba(255,255,255,0.3); }
.flowTable tr:nth-child(even){ background-color:rgba(255,255,255,0.6); }

.infoTable table{
	border:1px;
	font-size:100%;
	clear:both;
	border-spacing:10px;
}

.infoTable tr td{
	padding:10px;
	text-align:left;
	background-color:rgba(255,255,255,0.6);
	box-shadow: inset 0 0 0 2px #55c;
}

.infoTable tr th{
	text-align:left;
	box-shadow: inset 0 0 0 2px #1a1a71;
	color:#dce0f1;
	background-color:#2e3871;
	padding:10px;
}

.userMenu{
	color:#fff;
	text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000,
	1px 1px 1px black, -1px -1px 1px black, 2px 2px 2px black;
}

/* ----------------------------------------------------------
   HOME (WRAP + BOX GRID)
   ---------------------------------------------------------- */

.homeWrap{
	--boxW:300px;
	--gap:20px;

	width:100%;
	max-width: calc(var(--boxW) * 3 + var(--gap) * 2);
	margin:0 auto;
	padding:0 10px;
	box-sizing:border-box;
}

.homeTopBox{
	width:100%;
	box-sizing:border-box;
	text-align:justify;
	text-align-last:center;
	padding:10px;
	margin:10px 0;
	line-height:1.25;
}

.homeBoxRow{
	display:grid;
	gap:var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items:stretch;
}

.homeBox{
	display:flex;
	flex-direction:column;
	height:100%;
}

.homeBoxTitle{
	margin:0;
	text-align:center;
	line-height:1.2;
}

.homeBoxHeader{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:72px;
	padding:10px 10px 0 10px;
}

.homeBoxBody{
	padding:10px;
	padding-top:8px;
	text-align:left;
	line-height:1.35;
}

.homeBoxBody strong{
	display:block;
	text-align:center;
	margin:12px 0 6px 0;
}

.homeBoxBody p{ margin:0 0 10px 0; }

.homeBoxBody ul{
	margin:10px 0 10px 0;
	padding:0;
	list-style:none;
}

.homeBoxBody li{
	display:flex;
	align-items:baseline;
	gap:10px;
	margin:6px 0;
	line-height:1.35;
}
.homeBoxBody li::before{
	content:"•";
	opacity:0.5;
	font-size:1.2em;
	line-height:1;
}

/* ----------------------------------------------------------
   TILES / SHELVES / COVERS
   ---------------------------------------------------------- */

.uiTileGrid{
	display:grid;
	gap:10px;
	justify-content:center;
	grid-template-columns:repeat(auto-fill, calc(var(--tileW,128px) + 10px));
}

.uiTileItem{
	width:calc(var(--tileW,128px) + 10px);
	display:flex;
	flex-direction:column;
	align-items:center;
}

.uiTileLabel{
	width:var(--tileW,128px);
	min-height:var(--labelH,34px);
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	overflow:hidden;
	line-height:1.15;
	word-break:break-word;
	hyphens:auto;
}

.uiTileLabelText{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}

.uiTileBox{
	width:var(--tileW,128px);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.uiTileBox:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 14px rgba(0,0,0,.18);
}

.uiTileBox:active{
	transform:translateY(0px);
	box-shadow:0 3px 8px rgba(0,0,0,.14);
}

.uiTileImg{
	display:block;
	width:100%;
	height:auto;
}

.uiShelf{ margin-bottom:18px; }

.uiShelfTitle{
	padding:3px;
	margin:0;
	text-align:center;
	font-weight:600;
	position:relative;
	border-radius:10px;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
}

.uiShelfTitle:before{
	content:"";
	position:absolute;
	left:0; right:0; top:0;
	height:1px;
	background: linear-gradient(to right, transparent, rgba(255,255,255,.22), transparent);
}
.uiShelfTitle:after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:0;
	height:1px;
	background: linear-gradient(to right, transparent, rgba(0,0,0,.28), transparent);
}

.uiShelfTitleInner{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	line-height:1;
}

.uiShelfTitleIconWrap{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height:1;
}

.uiShelfTitleIcon{
	width:32px;
	height:32px;
	display:block;
}

.uiCoverRow{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	align-items:flex-end;
	justify-content:center;
	padding-top:10px;
}

.uiCoverFrame{
	width:var(--coverW,128px);
	display:flex;
	align-items:flex-end;
	justify-content:center;
}

.uiCoverImg{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	border-radius:10px;
	border:1px solid rgba(255,255,255,.28);
	box-shadow:0 10px 22px rgba(0,0,0,.18);
	background:rgba(255,255,255,.06);
	transition:transform .12s ease, box-shadow .12s ease;
}

.uiCoverImg:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 28px rgba(0,0,0,.22);
}

/* ----------------------------------------------------------
   NIN TABLE
   ---------------------------------------------------------- */

.uiNinTable{
	width:100%;
	table-layout:fixed;
	border-collapse:separate;
	border-spacing:0;
	background:rgba(230,236,245,.65);
	border:2px solid rgba(20,40,75,.62);
	border-radius:10px;
	overflow:hidden;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px rgba(0,0,0,.10);
}

.uiNinTable th,
.uiNinTable td{
	padding:8px 10px;
	vertical-align:top;
	border-right:1px solid rgba(20,40,75,.18);
	border-bottom:1px solid rgba(20,40,75,.18);
	color:rgba(0,0,0,.82);
}

.uiNinTable th:last-child,
.uiNinTable td:last-child{ border-right:none; }

.uiNinTable thead th{
	font-weight:700;
	color:rgba(0,0,0,.82);
	background:linear-gradient(to bottom, rgba(160,185,225,.55) 0%, rgba(125,155,205,.40) 60%, rgba(95,125,180,.32) 100%);
	border-bottom:2px solid rgba(20,40,75,.30);
}

.uiNinTable th.uiNinColGen,
.uiNinTable td.uiNinColGen{
	width:52px;
	white-space:nowrap;
}

.uiNinTable th.uiNinColGame,
.uiNinTable td.uiNinColGame{
	width:84px;
	white-space:nowrap;
}

.uiNinTable td.uiNinColGen,
.uiNinTable td.uiNinColGame{
	background:linear-gradient(to bottom, rgba(160,185,225,.35) 0%, rgba(125,155,205,.22) 100%);
}

.uiNinTable td.uiNinColEntry{ background:rgba(255,255,255,.82); }

.uiNinTable tbody tr:nth-child(even) td{ background:rgba(240,245,252,.70); }

.uiNinTable tbody tr:nth-child(even) td.uiNinColGen,
.uiNinTable tbody tr:nth-child(even) td.uiNinColGame{
	background:linear-gradient(to bottom, rgba(160,185,225,.28) 0%, rgba(125,155,205,.18) 100%);
}

.uiNinTable tbody tr:nth-child(even) td.uiNinColEntry{ background:rgba(255,255,255,.88); }

.uiNinTable tbody tr:hover td{ background:rgba(255,255,255,.74); }

.uiNinColEntry{ width:auto; }

.uiNinTable tbody tr:hover td.uiNinColGen,
.uiNinTable tbody tr:hover td.uiNinColGame{
	background:linear-gradient(to bottom, rgba(160,185,225,.40) 0%, rgba(125,155,205,.26) 100%);
}
.uiNinTable tbody tr:hover td.uiNinColEntry{ background:rgba(255,255,255,.94); }

.uiNinPill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:22px;
	padding:2px 6px;
	border-radius:7px;
	font-weight:700;
	font-size:12px;
	line-height:1;
	border:1px solid rgba(20,40,75,.40);
	background:linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(230,238,250,.35) 100%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

.uiNinPillRow{
	display:inline-flex;
	gap:4px;
	flex-wrap:wrap;
}

/* ----------------------------------------------------------
   TYPE BADGES
   ---------------------------------------------------------- */

.typeBadge{
	display:inline-block;
	padding:3px 8px;
	border-radius:5px;
	font-size:11px;
	font-weight:bold;
	line-height:14px;
	text-transform:uppercase;
	letter-spacing:0.4px;
	color:#fff;
	text-align:center;
	min-width:54px;

	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);

	text-shadow:
			-1px -1px 0 rgba(0,0,0,0.55),
			1px -1px 0 rgba(0,0,0,0.55),
			-1px  1px 0 rgba(0,0,0,0.55),
			1px  1px 0 rgba(0,0,0,0.55),
			0px  1px 0 rgba(0,0,0,0.55);
}

.type-normal{ background:#d5cfb0; }
.type-fire{ background:#ff4d4d; }
.type-water{ background:#4872d9; }
.type-electric{ background:#F8D030; }
.type-grass{ background:#3b8813; }
.type-ice{ background:#6deae5; }
.type-fighting{ background:#b24c10; }
.type-poison{ background:#8813d5; }
.type-ground{ background:#724e37; }
.type-flying{ background:#d4e5e3; }
.type-psychic{ background:#cc3eec; }
.type-bug{ background:#91a21b; }
.type-rock{ background:#b7935f; }
.type-ghost{ background:#4e2494; }
.type-dragon{ background:#333e7a; }
.type-dark{ background:#484156; }
.type-steel{ background:#6b6b8c; }
.type-fairy{ background:#de96e7; }

.type-stellar{
	background:linear-gradient(135deg,
	#ff4d4d,
	#ffae42,
	#ffe14d,
	#54ff7a,
	#4dd2ff,
	#6f6fff,
	#d24dff
	);
	border:1px solid rgba(255,255,255,0.25);
	box-shadow:0 0 8px rgba(255,255,255,0.12);
}

.type-unknown{ background:#a4a4a4; }

/* ----------------------------------------------------------
   FIELDSETS
   ---------------------------------------------------------- */

fieldset{
	vertical-align:top;
	border:1px solid #44444499;
	margin-bottom:1em;
	padding:5px;
	margin:5px;
	display:inline;
	border-radius:6px;
	background-color:rgba(255,255,255,0.1);
}
fieldset legend{
	color:#000;
	font-size:80%;
	font-weight:bold;
}
fieldset fieldset{
	margin-top:0;
	padding:10px;
}
fieldset fieldset legend{
	font-size:80%;
	font-weight:normal;
}
fieldset fieldset div{
	clear:left;
	margin:20px;
	padding:10px;
}

/* ----------------------------------------------------------
   FLASH DIALOGS
   ---------------------------------------------------------- */

.flash_success .ui-dialog-titlebar{
	background-color:#34732a;
	background: radial-gradient(circle, #99cc66, #34732a);
}
.flash_error .ui-dialog-titlebar{
	background-color:#990000;
	background: radial-gradient(circle, #ff6666, #990000);
}
.flash_info .ui-dialog-titlebar{
	background-color:#3366cc;
	background: radial-gradient(circle, #66cccc, #3366cc);
}
.flash_warning .ui-dialog-titlebar{
	color:black;
	background-color:#ffcc33;
	background: radial-gradient(circle, #ffff99, #ffcc33);
}

.note_flashDiv{
	display:none;
	z-index:1000;
	bottom:20px;
	box-sizing:border-box;
	left:20%;
	border:solid white 1px;
	padding:10px;
	overflow:auto;
	margin:10px 0;
	color:black;
	width:780px;
	pointer-events:auto;
}