/********************************************************************************
 *	Yiczo template - dark arcade theme based on the "Yiczo" design by Hive Designs
 ********************************************************************************/

:root {
	--yz-bg: #000;
	--yz-panel: #060606;
	--yz-panel-edge: #3a3a3a;
	--yz-box: #101010;
	--yz-box-edge: #232323;
	--yz-line: #1d1d1d;
	--yz-text: #8f8f8f;
	--yz-bright: #ececec;
	--yz-muted: #5e5e5e;
	--yz-wrap: 1000px;
	/* Default accent (red) - overridden by the .yz-c-* colour classes */
	--yz-hi: #ff5a5a;
	--yz-a: #d01717;
	--yz-lo: #7a0909;
}

/* Accent colours used by tabs, section heads and buttons */
.yz-c-pink   { --yz-hi: #ff6fb4; --yz-a: #df1677; --yz-lo: #7c0a43; }
.yz-c-blue   { --yz-hi: #6fb4ff; --yz-a: #1d6fd0; --yz-lo: #0b3a78; }
.yz-c-green  { --yz-hi: #8ee35e; --yz-a: #3c9c1d; --yz-lo: #195a09; }
.yz-c-red    { --yz-hi: #ff6363; --yz-a: #c91414; --yz-lo: #6c0606; }
.yz-c-orange { --yz-hi: #ffad5c; --yz-a: #e0600e; --yz-lo: #7a2c03; }

* { box-sizing: border-box; }

html { background: var(--yz-bg); }

body {
	margin: 0;
	background: var(--yz-bg);
	color: var(--yz-text);
	font: 13px/1.55 Tahoma, Verdana, "Segoe UI", sans-serif;
}

a { color: #d6d6d6; text-decoration: none; }
a:hover, a:focus-visible { color: #fff; text-decoration: underline; }
img { border: 0; }
h1, h2, h3 { color: var(--yz-bright); margin: 0; font-weight: bold; }
p { margin: 0 0 10px; }

.yz-wrap {
	width: 100%;
	max-width: var(--yz-wrap);
	margin: 0 auto;
	padding: 0 16px;
}

.cat-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: -3px;
	margin-right: 6px;
	border-radius: 3px;
}

.yz-empty { color: var(--yz-muted); font-style: italic; }

/* ---------------------------------------------------------------- Banner */

.yz-banner {
	background-color: #04102a;
	background-size: cover;
	background-position: center;
	border-top: 6px solid #0a0a0a;
}
.yz-banner-inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	min-height: 180px;
	padding-top: 14px;
	padding-bottom: 18px;
}
.yz-logo {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	min-width: 0;
	text-decoration: none !important;
	max-width: 70%;
}
.yz-mascot { display: block; max-height: 170px; width: auto; margin-bottom: -18px; }
.yz-logo-img { display: block; max-height: 110px; width: auto; max-width: 100%; }
.yz-logo-text {
	font-family: "Russo One", Impact, sans-serif;
	font-size: clamp(30px, 8vw, 64px);
	line-height: 1;
	letter-spacing: 1px;
	background: linear-gradient(180deg, #e3f4ff 0%, #8fd0ff 30%, #2a8cff 48%, #0b4fc4 52%, #1f8bff 78%, #8fe0ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1px rgba(2, 18, 50, .55);
	filter: drop-shadow(0 0 10px rgba(40, 140, 255, .65)) drop-shadow(0 3px 0 rgba(0, 0, 0, .6));
	overflow-wrap: anywhere;
}

.yz-search {
	position: absolute;
	top: 10px;
	right: 16px;
	display: flex;
	padding: 3px;
	background: rgba(0, 0, 0, .55);
	border: 1px solid #2a3c5a;
	border-radius: 3px;
}
.yz-search input {
	width: 190px;
	padding: 5px 8px;
	border: 1px solid #c8c8c8;
	border-radius: 2px 0 0 2px;
	background: #fff;
	color: #222;
	font: inherit;
	font-size: 12px;
}
.yz-search button {
	padding: 4px 12px;
	border: 1px solid #5a1a5a;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(#b14ab1, #7d237d);
	color: #fff;
	font: inherit;
	font-size: 11px;
	cursor: pointer;
}
.yz-search button:hover { background: linear-gradient(#c65cc6, #8f2e8f); }

/* ---------------------------------------------------------------- Category bar */

.yz-nav {
	background: linear-gradient(#1b1b1b, #0b0b0b);
	border-top: 1px solid #2c2c2c;
	border-bottom: 1px solid #000;
	box-shadow: 0 2px 0 #151515;
}
.yz-nav-toggle, .yz-nav-burger { display: none; }
.yz-nav-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yz-nav-list a {
	display: flex;
	align-items: center;
	padding: 10px 13px;
	color: #a9a9a9;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 2px solid transparent;
}
.yz-nav-list a:hover, .yz-nav-list a:focus-visible {
	color: #fff;
	text-decoration: none;
	border-bottom-color: #df1677;
	background: rgba(255, 255, 255, .03);
}

/* ---------------------------------------------------------------- Panel */

.yz-panel {
	/* Glass frame thickness: thicker along the top, as in the design */
	--yz-frame-top: 5px;
	--yz-frame-side: 3px;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 22px;
	margin-top: 18px;
	margin-bottom: 18px;
	padding: calc(20px + var(--yz-frame-top)) calc(18px + var(--yz-frame-side)) calc(20px + var(--yz-frame-side));
	background: var(--yz-panel);
	border-radius: 7px;
	box-shadow: 0 0 0 1px #000, 0 0 30px rgba(0, 0, 0, .8);
}
/* The frame itself: a light steel-grey glass edge at the top fading into the dark frame lower down */
.yz-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: var(--yz-frame-top) var(--yz-frame-side) var(--yz-frame-side);
	border-radius: inherit;
	background: linear-gradient(180deg, #b4bcc9 0, #7d8592 6px, #565c66 24px, #3e4148 90px, var(--yz-panel-edge) 240px);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}
/* Inner bevel line + a faint glass sheen just inside the top edge */
.yz-panel::after {
	content: "";
	position: absolute;
	top: var(--yz-frame-top);
	right: var(--yz-frame-side);
	bottom: var(--yz-frame-side);
	left: var(--yz-frame-side);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(160, 190, 230, .07), rgba(160, 190, 230, 0) 70px);
	box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 1px rgba(0, 0, 0, .6);
	pointer-events: none;
}
.yz-panel > * { position: relative; z-index: 1; }
.yz-content { flex: 1; min-width: 0; }
.yz-side { width: 250px; flex-shrink: 0; }

/* ---------------------------------------------------------------- Welcome + breadcrumbs */

.yz-welcome { margin: 0 0 18px; }
.yz-welcome h1 {
	margin-bottom: 8px;
	color: #cfcfcf;
	font-family: "Segoe UI", Tahoma, sans-serif;
	font-size: 21px;
	font-weight: 300;
}
.yz-welcome h1 span { color: #e8197e; font-weight: 600; }
.yz-welcome p { font-size: 12px; color: #6d6d6d; }

.yz-crumbs {
	margin: 0 0 16px;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--yz-muted);
	background: var(--yz-box);
	border: 1px solid var(--yz-box-edge);
	border-radius: 3px;
}
.yz-crumbs strong { color: var(--yz-bright); }

/* ---------------------------------------------------------------- Glossy shared pieces */

.yz-btn,
.yz-tab,
.yz-ribbon,
.yz-box-head,
.yz-section-head > a,
.yz-section-head > span {
	background: linear-gradient(180deg, var(--yz-hi) 0%, var(--yz-a) 48%, var(--yz-lo) 52%, var(--yz-a) 100%);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}

.yz-btn {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--yz-lo);
	border-radius: 4px;
	font: bold 12px/1.2 Tahoma, Verdana, sans-serif;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(0, 0, 0, .7);
}
.yz-btn:hover, .yz-btn:focus-visible { color: #fff; text-decoration: none; filter: brightness(1.15); }
.yz-btn-sm { padding: 2px 10px; font-size: 10px; border-radius: 2px; }

/* ---------------------------------------------------------------- Home tabs */

.yz-tabs { margin: 0 0 22px; }
.yz-tab-bar { display: flex; gap: 4px; margin: 0 0 12px; }
.yz-tab {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 9px 26px 9px 18px;
	border: 0;
	border-radius: 10px 0 0 10px;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
	font: 10px/1.2 Arial, sans-serif;
	letter-spacing: 3px;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	opacity: .5;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.yz-tab:hover { opacity: .8; }
.yz-tab.is-active { opacity: 1; }
.yz-tab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.yz-tab-panel[hidden] { display: none; }
.yz-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
}
.yz-tile {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #151515;
	border: 1px solid #262626;
	box-shadow: inset 0 0 12px #000;
}
.yz-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.yz-tile span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 5px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translateY(100%);
	transition: transform .15s;
}
.yz-tile:hover, .yz-tile:focus-visible { border-color: #555; text-decoration: none; }
.yz-tile:hover img { transform: scale(1.06); }
.yz-tile:hover span, .yz-tile:focus-visible span { transform: none; }

.yz-banner-ad {
	margin: 0 auto 22px;
	padding: 10px;
	text-align: center;
	background: #121212;
	border: 1px solid #262626;
	overflow: hidden;
}

/* ---------------------------------------------------------------- Category sections */

.yz-section { margin: 0 0 26px; }
.yz-section-head {
	display: flex;
	margin: 0 0 14px;
	border-bottom: 2px solid var(--yz-a);
	font-size: 13px;
}
.yz-section-head > a,
.yz-section-head > span {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px 5px;
	border-radius: 6px 6px 0 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.yz-section-head > a:hover { text-decoration: none; filter: brightness(1.15); }
.yz-section-head .cat-icon { margin-right: 7px; }

.yz-section-foot {
	margin-top: 14px;
	border-top: 2px solid var(--yz-a);
	text-align: right;
}
.yz-btn-more {
	padding: 7px 30px;
	border-top: 0;
	border-radius: 0 0 6px 6px;
	font-size: 13px;
}

.yz-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px 18px;
}
.yz-cards-wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.yz-card { min-width: 0; }
.yz-card-name {
	display: block;
	margin: 0 0 6px;
	color: #e5e5e5;
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.yz-thumb {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #161616;
	border: 1px solid #2a2a2a;
	box-shadow: inset 0 0 14px #000, 0 0 0 1px #000;
}
.yz-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yz-thumb:hover, .yz-thumb:focus-visible { border-color: var(--yz-a); }
.yz-card-meta { display: block; margin-top: 4px; font-size: 10px; color: var(--yz-muted); }
.yz-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}

.yz-dots { display: inline-flex; gap: 3px; }
.yz-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #464646;
}
.yz-dots i.on { background: radial-gradient(circle at 35% 35%, #ffb36b, #d9530b); }

/* ---------------------------------------------------------------- Browse / search */

.yz-list-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 14px;
	margin: 0 0 12px;
	font-size: 12px;
}
.yz-list-bar strong { color: var(--yz-bright); }
.yz-sort a {
	margin-left: 4px;
	padding: 2px 8px;
	border: 1px solid #2a2a2a;
	border-radius: 3px;
	color: #9a9a9a;
	font-size: 11px;
}
.yz-sort a.is-active, .yz-sort a:hover {
	background: var(--yz-a);
	border-color: var(--yz-a);
	color: #fff;
	text-decoration: none;
}

.yz-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 12px 0;
	font-size: 12px;
}
.yz-pages a, .yz-pages strong, .yz-pages span {
	min-width: 30px;
	padding: 4px 9px;
	text-align: center;
	border: 1px solid #2a2a2a;
	border-radius: 3px;
	background: #111;
}
.yz-pages strong { background: var(--yz-a); border-color: var(--yz-a); color: #fff; }
.yz-pages span { border-color: transparent; background: none; }
.yz-pages a:hover { border-color: var(--yz-a); text-decoration: none; }

/* ---------------------------------------------------------------- Sidebar */

.yz-ribbon {
	margin: 0;
	padding: 8px 14px;
	border-radius: 10px 0 0 10px;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
	font: 10px/1.2 Arial, sans-serif;
	letter-spacing: 3px;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.yz-featured { margin: 0 0 18px; }
.yz-featured-body { padding: 8px 0 0; }
.yz-featured-thumb { border-color: #333; }
.yz-featured-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 8px 0 4px;
}
.yz-featured-title a { color: #fff; font-weight: bold; font-size: 12px; letter-spacing: .5px; }
.yz-featured p { font-size: 11px; color: #6c6c6c; margin-bottom: 6px; }
.yz-featured-play {
	display: block;
	padding-top: 6px;
	border-top: 1px dotted #3a3a3a;
	color: #e8197e;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 1px;
}

.yz-box { margin: 0 0 16px; }
.yz-box-head {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid #5a0606;
	border-radius: 3px;
	font: bold 11px/1.2 Tahoma, Verdana, sans-serif;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 4px rgba(0, 0, 0, .8);
}
.yz-box-body {
	margin: 0 4px;
	padding: 12px;
	background: var(--yz-box);
	border: 1px solid var(--yz-box-edge);
	border-top: 0;
	font-size: 11px;
}
.yz-ad { text-align: center; overflow: hidden; }

.yz-list { list-style: none; padding: 4px 12px; }
.yz-list li { border-bottom: 1px solid var(--yz-line); }
.yz-list li:last-child { border-bottom: 0; }
.yz-list a, .yz-list .yz-empty { display: block; padding: 6px 0 6px 14px; position: relative; color: #a5a5a5; }
.yz-list a::before {
	content: "\203A";
	position: absolute;
	left: 2px;
	color: #e01b1b;
	font-weight: bold;
}
.yz-list a:hover { color: #fff; text-decoration: none; }
.yz-list .yz-more-link a { color: #e01b1b; }
.yz-list .yz-more-link a::before { content: none; }

.yz-side-games { list-style: none; margin: 0; padding: 0; }
.yz-side-games li + li { border-top: 1px solid var(--yz-line); }
.yz-side-games a { display: flex; align-items: center; gap: 9px; padding: 6px 0; text-decoration: none; }
.yz-side-games img { width: 34px; height: 34px; object-fit: cover; border: 1px solid #2a2a2a; flex-shrink: 0; }
.yz-side-games a > span { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.yz-side-games strong { color: #d2d2d2; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-side-games em { color: var(--yz-muted); font-style: normal; font-size: 10px; }
.yz-side-games a:hover strong { color: #fff; }

.yz-stats { list-style: none; margin: 0; padding: 0; }
.yz-box-body.yz-stats { margin: 0 4px; padding: 6px 12px; }
.yz-stats li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--yz-line); }
.yz-stats li:last-child { border-bottom: 0; }
.yz-stats strong { color: var(--yz-bright); text-align: right; }

.yz-select, .yz-form input, .yz-form textarea, .yz-code {
	width: 100%;
	padding: 6px 8px;
	background: #070707;
	border: 1px solid #2e2e2e;
	border-radius: 3px;
	color: #cfcfcf;
	font: 12px Tahoma, Verdana, sans-serif;
}
.yz-select:focus, .yz-form input:focus, .yz-form textarea:focus, .yz-code:focus {
	outline: none;
	border-color: #e8197e;
}

/* ---------------------------------------------------------------- Game page */

.yz-panel-full .yz-content { width: 100%; }
.yz-game-tools { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 10px; }
.yz-game-stage {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 12px;
	background: #000;
	border: 1px solid #222;
	box-shadow: inset 0 0 30px #000;
}
.yz-game { max-width: 100%; height: auto; background: #000; }
.yz-game object, .yz-game embed, .yz-game iframe, .yz-game canvas, .yz-game ruffle-object, .yz-game ruffle-embed {
	display: block;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}
.yz-game:fullscreen { width: 100vw !important; height: 100vh; aspect-ratio: auto !important; }
.yz-game-note { padding: 10px; color: #aaa; }

#yz-lights-overlay { display: none; }
body.yz-lights-off #yz-lights-overlay {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, .93);
	cursor: pointer;
}
body.yz-lights-off .yz-game-stage, body.yz-lights-off .yz-game-tools { position: relative; z-index: 60; }

.yz-columns { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.yz-text { font-size: 12px; }
.yz-text h3 { margin: 12px 0 6px; font-size: 12px; color: #e8197e; text-transform: uppercase; letter-spacing: 1px; }
.yz-code { min-height: 110px; font: 11px/1.4 Consolas, monospace; resize: vertical; }

/* Star rating: grey stars, orange current rating, yellow on hover */
.yz-stars {
	position: relative;
	width: 120px;
	height: 24px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z' fill='%23262626' stroke='%23484848'/%3E%3C/svg%3E") repeat-x;
	background-size: 24px 24px;
}
.yz-stars li { display: inline; }
.yz-stars #current-rating, .yz-stars a {
	position: absolute;
	top: 0;
	left: 0;
	height: 24px;
	overflow: hidden;
	text-indent: -9999px;
	background-size: 24px 24px;
	background-repeat: repeat-x;
}
.yz-stars #current-rating {
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z' fill='%23f07a12' stroke='%23a84a00'/%3E%3C/svg%3E");
}
.yz-stars a { z-index: 2; }
.yz-stars a:hover, .yz-stars a:focus-visible {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z' fill='%23ffd21f' stroke='%23b38f00'/%3E%3C/svg%3E");
}
.yz-stars .yz-star-1 { width: 20%; z-index: 6; }
.yz-stars .yz-star-2 { width: 40%; z-index: 5; }
.yz-stars .yz-star-3 { width: 60%; z-index: 4; }
.yz-stars .yz-star-4 { width: 80%; z-index: 3; }
.yz-stars .yz-star-5 { width: 100%; z-index: 2; }
#ratetxt { font-size: 11px; }
#ratetxt strong { color: var(--yz-bright); }

/* Game page: buttons above the game (favourite and report on the left, screen buttons on the right) */
.yz-game-tools { flex-wrap: wrap; }
.yz-game-tools-gap { flex: 1; }
.yz-btn:disabled { opacity: .5; cursor: default; filter: none; }

/* Play button: the game is only loaded once it is pressed */
.yz-game { position: relative; }
.yz-play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 10px;
	border: 0;
	background: radial-gradient(circle at 50% 40%, #1b2a44 0%, #05070c 70%);
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.yz-play img { width: 120px; height: 120px; max-height: 40%; object-fit: cover; border: 2px solid #2a3c5a; border-radius: 8px; box-shadow: 0 4px 18px #000; }
.yz-play-btn {
	padding: 10px 34px;
	border: 1px solid #195a09;
	border-radius: 6px;
	background: linear-gradient(180deg, #8ee35e 0%, #3c9c1d 48%, #195a09 52%, #3c9c1d 100%);
	font: bold 18px/1.2 Tahoma, Verdana, sans-serif;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 8px rgba(0, 0, 0, .8);
}
.yz-play:hover .yz-play-btn, .yz-play:focus-visible .yz-play-btn { filter: brightness(1.2); }
.yz-play-name { max-width: 100%; color: #b9c6dc; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Report a problem" panel and the messages of the report and comment forms */
.yz-report { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 10px; padding: 10px 12px; background: var(--yz-box); border: 1px solid #3a1010; border-radius: 3px; font-size: 12px; }
.yz-report[hidden] { display: none; }
.yz-report strong { flex-basis: 100%; color: var(--yz-bright); }
.yz-report label { cursor: pointer; }
.yz-form-msg { color: #8ee35e; font-size: 12px; }
.yz-form-msg.is-error { color: #ff8a8a; }

/* Share row under the game */
.yz-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11px; }
.yz-share > span { color: var(--yz-muted); }
.yz-share-btn { padding: 3px 10px; background: none; border: 1px solid #2e2e2e; border-radius: 3px; color: #a5a5a5; font: inherit; cursor: pointer; }
.yz-share-btn:hover, .yz-share-btn:focus-visible { border-color: var(--yz-a); color: #fff; text-decoration: none; }

/* Full description and keyword tags in "About This Game" */
.yz-game-about { margin: 12px 0 0; }
.yz-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.yz-tags span { color: var(--yz-muted); }
.yz-tags a { padding: 2px 9px; border: 1px solid #2e2e2e; border-radius: 10px; color: #a5a5a5; font-size: 11px; }
.yz-tags a:hover { border-color: #e8197e; color: #fff; text-decoration: none; }

/* Comments */
.yz-comments { list-style: none; margin: 0 0 14px; padding: 0; }
.yz-comments:empty { display: none; }
.yz-comments li { padding: 8px 0; border-bottom: 1px solid var(--yz-line); }
.yz-comments strong { color: var(--yz-bright); }
.yz-comments span { margin-left: 6px; color: var(--yz-muted); font-size: 11px; }
.yz-comments p { margin: 4px 0 0; overflow-wrap: break-word; }
.yz-comment-form { max-width: 520px; }
.yz-comment-form textarea { resize: vertical; }
.yz-comment-rules { margin: 0; color: var(--yz-muted); font-size: 11px; }
#yz-turnstile:empty { display: none; }
.yz-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Home page: "Continue Playing" and "Your Favourites" (filled in by javascript.js) */
.yz-mygames[hidden], .yz-mygames [hidden] { display: none; }
.yz-mygames { margin: 0 0 22px; }
.yz-mygames h2 { margin: 0 0 8px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--yz-bright); }
.yz-mygames > div + div { margin-top: 14px; }

/* ---------------------------------------------------------------- Inner pages */

.yz-page-text { padding: 4px 2px; font-size: 13px; }
.yz-page-text h3 { margin: 16px 0 6px; font-size: 13px; color: #e8197e; }
.yz-page-text p { max-width: 70ch; }
.yz-link-list, .yz-article-list { margin: 0 0 16px; padding: 0; list-style: none; }
.yz-link-list li, .yz-article-list li { padding: 8px 0; border-bottom: 1px solid var(--yz-line); }

/* Article lists (articles page and "Related Articles" on a game page): title, date, first lines */
.yz-article-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.yz-article-list li:last-child { border-bottom: 0; }
.yz-article-list a { color: var(--yz-bright); font-weight: bold; }
.yz-article-list span { color: var(--yz-muted); font-size: 11px; white-space: nowrap; }
.yz-article-list span a { color: var(--yz-hi); font-weight: normal; }

/* Articles page: search box and category filter */
.yz-article-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.yz-article-search input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	padding: 6px 8px;
	background: #070707;
	border: 1px solid #2e2e2e;
	border-radius: 3px;
	color: #cfcfcf;
	font: 12px Tahoma, Verdana, sans-serif;
}
.yz-article-search input[type="search"]:focus { outline: none; border-color: #e8197e; }
.yz-article-search .yz-select { flex: 0 1 180px; width: auto; }
.yz-article-cats { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; margin: 0 0 12px; }
.yz-article-cats a { padding: 3px 10px; border: 1px solid #2e2e2e; border-radius: 3px; color: #a5a5a5; font-size: 11px; }
.yz-article-cats a:hover, .yz-article-cats a.on { border-color: var(--yz-a); color: #fff; text-decoration: none; }
.yz-article-cats a.on { background: var(--yz-a); }
.yz-article-list p { flex-basis: 100%; max-width: none; margin: 0; }
.yz-box-body.yz-article-list { margin: 0 4px; padding: 4px 12px; }

/* An article as written in the admin panel's editor */
.yz-article-meta { color: var(--yz-muted); font-size: 11px; }
.yz-article-body { margin: 0 0 16px; overflow-wrap: break-word; }
.yz-article-body::after { content: ""; display: block; clear: both; }
.yz-article-body p { max-width: none; }
.yz-article-body h2, .yz-article-body h3, .yz-article-body h4 { margin: 18px 0 8px; color: var(--yz-bright); line-height: 1.3; }
.yz-article-body h2 { font-size: 20px; }
.yz-article-body h3 { font-size: 16px; }
.yz-article-body h4 { font-size: 14px; }
.yz-article-body a { color: var(--yz-hi); text-decoration: underline; }
.yz-article-body img, .yz-article-body video, .yz-article-body iframe { max-width: 100%; }
.yz-article-body img, .yz-article-body video { height: auto; }
.yz-article-body iframe { border: 0; }
.yz-article-body figure { margin: 12px 0; }
.yz-article-body figure.image { display: table; }
.yz-article-body figure.align-center { margin-left: auto; margin-right: auto; }
.yz-article-body figcaption { display: table-caption; caption-side: bottom; padding: 4px 0; color: var(--yz-muted); font-size: 11px; text-align: center; }
.yz-article-body ul, .yz-article-body ol { margin: 0 0 10px; padding-left: 26px; }
.yz-article-body blockquote { margin: 12px 0; padding: 4px 14px; border-left: 3px solid var(--yz-a); color: #b5b5b5; font-style: italic; }
.yz-article-body pre { margin: 0 0 10px; padding: 10px 12px; overflow: auto; background: var(--yz-box); border: 1px solid var(--yz-line); border-radius: 3px; color: #c9c9c9; font: 12px/1.5 Consolas, "Courier New", monospace; }
.yz-article-body code { font-family: Consolas, "Courier New", monospace; color: #c9c9c9; }
.yz-article-body table { max-width: 100%; margin: 0 0 10px; border-collapse: collapse; }
.yz-article-body td, .yz-article-body th { padding: 6px 9px; border: 1px solid #2c2c2c; }
.yz-article-body th { color: var(--yz-bright); background: var(--yz-box); }
.yz-article-body hr { margin: 16px 0; border: 0; border-top: 1px solid #2c2c2c; }
.yz-error { padding: 8px 12px; background: #2a0606; border: 1px solid #6c0606; color: #ffb3b3; border-radius: 3px; }
.yz-form { display: grid; gap: 12px; max-width: 460px; }
.yz-form label { display: grid; gap: 4px; color: var(--yz-bright); font-size: 12px; font-weight: bold; }
.yz-form button { justify-self: start; }

/* ---------------------------------------------------------------- Footer */

.yz-footer { padding: 6px 0 30px; font-size: 11px; }
.yz-footer-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	border-top: 1px solid #1c1c1c;
}
.yz-footer-links { margin: 0 0 6px; }
.yz-footer-links a { color: #6f6f6f; }
.yz-footer-links a + a::before { content: "|"; margin: 0 6px; color: #3a3a3a; }
.yz-footer-links a:hover { color: #fff; }
.yz-footer p { margin: 0; color: #4f4f4f; }
.yz-footer p a { color: #6f6f6f; }
.yz-credit { color: #6f6f6f; text-align: right; font-size: 10px; }
.yz-credit strong {
	display: block;
	color: #9c9c9c;
	font: 300 20px/1.1 "Segoe UI", Arial, sans-serif;
	letter-spacing: 1px;
}
.yz-credit strong span { font-weight: 100; }

/* ---------------------------------------------------------------- Framed games */

.yz-framed { margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.yz-framed-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 14px;
	background: linear-gradient(#1b1b1b, #0b0b0b);
	border-bottom: 2px solid #df1677;
	font-size: 12px;
}
.yz-framed-bar span { color: #fff; font-weight: bold; }
.yz-framed-home { font-weight: bold; color: #6fb4ff; }
.yz-framed-game { flex: 1; width: 100%; border: 0; background: #fff; }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 960px) {
	.yz-panel { flex-direction: column; }
	.yz-side {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 0 18px;
	}
	.yz-columns { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.yz-banner-inner { flex-direction: column; align-items: flex-start; min-height: 0; padding-top: 12px; padding-bottom: 14px; gap: 12px; }
	.yz-search { position: static; width: 100%; }
	.yz-search input { flex: 1; width: auto; min-width: 0; }
	.yz-logo { max-width: 100%; }
	.yz-mascot { max-height: 100px; margin-bottom: 0; }

	.yz-nav-burger {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 0;
		color: #ddd;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1px;
		cursor: pointer;
	}
	.yz-nav-burger span, .yz-nav-burger span::before, .yz-nav-burger span::after {
		display: block;
		width: 18px;
		height: 2px;
		background: #ddd;
		position: relative;
	}
	.yz-nav-burger span::before, .yz-nav-burger span::after { content: ""; position: absolute; left: 0; }
	.yz-nav-burger span::before { top: -6px; }
	.yz-nav-burger span::after { top: 6px; }
	.yz-nav-list { display: none; flex-direction: column; padding-bottom: 8px; }
	.yz-nav-toggle:checked ~ .yz-nav-list { display: flex; }
	.yz-nav-toggle:focus-visible + .yz-nav-burger { outline: 2px solid #df1677; }
	.yz-nav-list a { border-bottom: 1px solid #1c1c1c; }

	.yz-panel { --yz-frame-top: 4px; --yz-frame-side: 2px; padding: calc(14px + var(--yz-frame-top)) calc(12px + var(--yz-frame-side)) calc(14px + var(--yz-frame-side)); margin-top: 12px; }
	.yz-tab { padding-left: 12px; padding-right: 20px; letter-spacing: 1px; }
	.yz-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px 12px; }
	.yz-footer-inner { flex-direction: column; align-items: flex-start; }
	.yz-credit { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.yz-tile img, .yz-tile span { transition: none; }
}