/* Yanis Online: the website dressed as the game client itself. Window parts are taken from the
   2010 client's interface files (title bar, orb icon), scaled 2x with hard pixels; colours were
   sampled from its message box and buttons. The ground is Prontera's plaza cobblestone (the
   client's own texture, 2x, half AI-upscaled, half plain, darkened). Corners stay square.
   Text: Galmuri (OFL), made after the Korean bitmap UI fonts the client draws with; the wordmark
   keeps Pixelify Sans to match the client's login screen. FluxCP's stock markup is restyled at
   the end of this file. */

@font-face { font-family: "Galmuri11"; src: url(../fonts/galmuri11.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Galmuri11"; src: url(../fonts/galmuri11-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Galmuri14"; src: url(../fonts/galmuri14.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(../fonts/pixelify.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
	--frame: #c2c2c2;          /* window edge (client message box) */
	--frame-dark: #848384;     /* button bottom edge */
	--title-line: #000;        /* the title bar's last pixel row */
	--panel: #fff;
	--stripe: #f2f2f2;         /* window footer stripes */
	--ink: #000;
	--ink-soft: #4a4a4a;
	--label: #3a4f8f;          /* status-window labels */
	--npc: #0000ff;            /* NPC names in dialog */
	--select: #c9daf6;         /* selected list row */
	--hover-1: #c0c7d4;        /* button hover gradient (client btn _a) */
	--hover-2: #abbfe7;
	--hover-3: #ddeaf9;
	--up: #1c8c2a;
	--down: #c0281f;
	--focus: #f5c518;
	--shade: rgba(0, 0, 0, .55); /* chat-window black */
	--ui: "Galmuri11", "Dotum", "Gulim", system-ui, sans-serif;
	--read: "Galmuri14", "Galmuri11", system-ui, sans-serif;
	--pixel: "Pixelify Sans", "Galmuri11", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font: 15px/1.6 var(--read);
	color: var(--ink);
	background: #6d6a63 url(../img/prontera-cobble.jpg) 0 0 / 512px 512px repeat;
	-webkit-font-smoothing: none;
	font-smooth: never;
}
a { color: #1a3fb5; }
a:hover { color: #0a2580; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.y-num { font-variant-numeric: tabular-nums; }
.y-skip { position: absolute; left: -9999px; }
.y-skip:focus { left: 8px; top: 8px; z-index: 50; background: var(--panel); padding: 6px 10px; }

/* ------------------------------------------------------------------ windows */
.y-win {
	background: var(--panel);
	border: 1px solid var(--frame);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
	min-width: 0;
}
.y-win__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 10px 0 6px;
	background: url(../img/titlebar.png) 0 0 / 24px 34px repeat-x;
	border-bottom: 2px solid var(--title-line);
	image-rendering: pixelated;
}
.y-win__bar::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: url(../img/orb.png) center / 22px 22px no-repeat;
	image-rendering: pixelated;
}
.y-win__title { margin: 0; font: 400 15px/1 var(--read); color: var(--ink); }
.y-win__body { padding: 16px 18px 18px; }
.y-win__body > :first-child { margin-top: 0; }
.y-win__body > :last-child { margin-bottom: 0; }

/* the client's button: white-grey gradient, blue when pointed at */
.y-btn, input[type=submit], input[type=button], input[type=reset], button[type=submit], .submit_button {
	display: inline-block;
	padding: 6px 16px 5px;
	font: 400 12px/1.2 var(--ui);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid #a9a9a9;
	border-bottom-color: var(--frame-dark);
	background: linear-gradient(180deg, #d5d5d5 0%, #e9e9e9 15%, #dbdbdb 26%, #eaeaea 40%, #f5f5f5 55%, #fff 70%, #fbfbfb 100%);
}
.y-btn:hover, input[type=submit]:hover, input[type=button]:hover, button[type=submit]:hover, .y-btn--primary {
	color: var(--ink);
	background: linear-gradient(180deg, var(--hover-1) 0%, #c6cfe1 12%, #abb9d6 26%, var(--hover-2) 45%, #b3c8f1 65%, var(--hover-3) 100%);
}
.y-btn:active, input[type=submit]:active, button[type=submit]:active { background: #abbfe7; transform: translate(1px, 1px); }
.y-buttons {
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
	margin: 16px -18px -18px; padding: 8px 12px;
	border-top: 1px solid var(--frame);
	background: repeating-linear-gradient(180deg, #fff 0 2px, var(--stripe) 2px 4px);
}

/* ------------------------------------------------------------------ top: the chat window's black */
.y-top { background: var(--shade); border-bottom: 1px solid rgba(255, 255, 255, .15); position: relative; z-index: 20; }
.y-top__inner { max-width: 1120px; margin: 0 auto; padding: 12px 20px 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.y-brand { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.y-brand__name { font: 700 32px/1 var(--pixel); color: #fff; text-shadow: 3px 3px 0 #3f63b8; }
.y-brand__tag { font: 12px var(--ui); color: #d9e2f2; }
.y-me { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.y-me__name { color: #fff; font: 700 12px var(--ui); margin-right: 4px; }

.y-nav { max-width: 1120px; margin: 0 auto; padding: 0 20px 10px; }
.y-nav__toggle { display: none; }
.y-nav__groups { display: flex; flex-wrap: wrap; gap: 4px; }
.y-nav__group { position: relative; }
.y-nav__label {
	font: 400 12px/1.2 var(--ui);
	color: var(--ink);
	padding: 6px 14px 5px;
	cursor: pointer;
	border: 1px solid #a9a9a9;
	border-bottom-color: var(--frame-dark);
	background: linear-gradient(180deg, #d5d5d5 0%, #e9e9e9 15%, #dbdbdb 26%, #eaeaea 40%, #f5f5f5 55%, #fff 70%, #fbfbfb 100%);
}
.y-nav__group:hover .y-nav__label, .y-nav__group.is-open .y-nav__label {
	background: linear-gradient(180deg, var(--hover-1) 0%, #c6cfe1 12%, #abb9d6 26%, var(--hover-2) 45%, #b3c8f1 65%, var(--hover-3) 100%);
}
.y-nav__menu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 2px;
	list-style: none; background: var(--panel); border: 1px solid var(--frame); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}
.y-nav__group:hover .y-nav__menu, .y-nav__group.is-open .y-nav__menu, .y-nav__group:focus-within .y-nav__menu { display: block; }
.y-nav__menu a { display: block; padding: 5px 10px; color: var(--ink); text-decoration: none; white-space: nowrap; font: 12px/1.4 var(--ui); }
.y-nav__menu a:hover, .y-nav__menu a:focus-visible { background: var(--select); }
.y-nav__menu a[aria-current] { font-weight: 700; }

/* ------------------------------------------------------------------ shell */
.y-shell { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 20px 40px; }
.y-flash { margin: 0 0 18px; padding: 10px 14px; background: #fff; border: 1px solid var(--frame); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }
.y-page .y-win__title { font-size: 15px; }
.y-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 14px 0; background: #eef2fa; border-bottom: 1px solid var(--frame); }
.y-tabs a {
	padding: 5px 12px 4px; color: var(--ink); text-decoration: none; font: 12px var(--ui);
	background: linear-gradient(180deg, #e9eef8, #d4ddef); border: 1px solid var(--frame); border-bottom: 0; position: relative; top: 1px;
}
.y-tabs a:hover { background: var(--hover-3); }
.y-tabs a[aria-current] { background: #fff; font-weight: 700; }
#pagemenu { margin: 0 0 14px; font: 12px var(--ui); color: var(--ink-soft); }
#pagemenu a { margin-left: 10px; }

/* ------------------------------------------------------------------ home */
.y-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.y-select__list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--frame); font: 12px var(--ui); }
.y-select__list th { text-align: left; font-weight: 700; color: var(--label); padding: 6px 12px; background: #eef2fa; border-bottom: 1px solid var(--frame); }
.y-select__list td { padding: 12px; }
.y-select__list tr.is-selected td { background: var(--select); }
.y-select__name { font: 700 24px/1 var(--pixel); color: var(--ink); }
.y-select__about { margin: 14px 0 0; max-width: 62ch; }
.y-state { font: 700 12px var(--ui); }
.y-state::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border: 1px solid rgba(0, 0, 0, .45); vertical-align: 0; }
.y-state--up { color: var(--up); }
.y-state--up::before { background: #4fc15c; }
.y-state--down { color: var(--down); }
.y-state--down::before { background: #e0473f; }

/* NPC dialog and its select menu, as the client draws them */
.y-kafra { display: flex; flex-direction: column; gap: 10px; }
.y-dialog { background: #fff; border: 1px solid var(--frame); padding: 14px 16px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }
.y-dialog p { margin: 0 0 8px; }
.y-dialog p:last-child { margin: 0; }
.y-dialog__speaker { color: var(--npc); }
.y-menu { margin: 0; padding: 3px; list-style: none; background: #fff; border: 1px solid var(--frame); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }
.y-menu a { display: block; padding: 6px 10px; color: var(--ink); text-decoration: none; }
.y-menu a:hover, .y-menu a:focus-visible { background: var(--select); outline: none; }

.y-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; align-items: start; }
.y-row--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.y-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.y-facts dt { font: 700 12px/1.9 var(--ui); color: var(--label); }
.y-facts dd { margin: 0; }
.y-woe { list-style: none; margin: 0; padding: 0; }
.y-woe li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #e6e6e6; }
.y-note { color: var(--ink-soft); font: 12px/1.6 var(--ui); margin: 10px 0 0; }
.y-news + .y-news { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6e6e6; }
.y-news h3 { margin: 0; font: 400 15px/1.3 var(--read); }
.y-news .y-note { margin: 2px 0 8px; }

/* ------------------------------------------------------------------ foot */
.y-foot { color: #e8e8e8; font: 12px var(--ui); text-align: center; padding: 14px 20px 20px; background: var(--shade); }
.y-foot p { margin: 4px auto; max-width: 80ch; }
.y-foot__small { color: #cfd6e2; }
.y-foot select { margin-left: 6px; }

/* ------------------------------------------------------------------ FluxCP's own markup */
.y-win__body h2 { font: 400 15px/1.3 var(--read); margin: 22px 0 10px; padding-bottom: 4px; border-bottom: 1px solid #e6e6e6; }
.y-win__body h3 { font: 700 12px/1.3 var(--ui); margin: 18px 0 8px; color: var(--label); }
.y-win__body h4 { margin: 16px 0 6px; }
.y-win__body p { max-width: 75ch; }

.horizontal-table, .vertical-table, .generic-form-table, .character-stats, .woe-table, #server_status, .shop-table, .install_table, .y-table {
	width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--frame); margin: 0 0 16px; font: 12px/1.5 var(--ui);
}
.horizontal-table th, .vertical-table th, .character-stats th, .woe-table th, #server_status th, .shop-table th, .install_table th, .y-table th {
	text-align: left; font-weight: 700; color: var(--label); padding: 6px 10px; background: #eef2fa; border: 1px solid #d6dced;
}
.horizontal-table th a { color: var(--label); }
.horizontal-table td, .vertical-table td, .character-stats td, .woe-table td, #server_status td, .shop-table td, .install_table td, .generic-form-table td, .y-table td {
	padding: 6px 10px; border: 1px solid #e6e6e6; vertical-align: top;
}
.horizontal-table tr:nth-child(even) td { background: #fafbfd; }
.horizontal-table tr:hover td { background: var(--select); }
.vertical-table th { width: 30%; }
.generic-form-table { background: transparent; border: 0; }
.generic-form-table th { text-align: left; padding: 8px 12px 8px 0; vertical-align: top; font-weight: 700; color: var(--label); width: 30%; }
.generic-form-table td { border: 0; padding: 6px 0; }
.empty-row td { color: var(--ink-soft); font-style: italic; }
.online, .up { color: var(--up); font-weight: 700; }
.offline, .down { color: var(--down); font-weight: 700; }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=file], input[type=date], select, textarea {
	font: 12px/1.4 var(--ui); color: var(--ink); padding: 5px 7px; background: #fff;
	border: 1px solid #a9a9a9; box-shadow: inset 1px 1px 0 #e3e3e3; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; }
label { cursor: pointer; }

p.message, .message { padding: 10px 14px; background: #eef2fa; border: 1px solid #b7c6e6; }
p.red, .red, .error { color: var(--down); }
p.red, .error { padding: 10px 14px; background: #fff0ee; border: 1px solid #e3a49f; }
.notice { padding: 10px 14px; background: #fffbe6; border: 1px solid #d9c780; }
.pages, .pagination { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 4px; font: 12px var(--ui); }
.pages a, .pages span, .pagination a, .pagination span {
	padding: 3px 9px; border: 1px solid #a9a9a9; color: var(--ink); text-decoration: none;
	background: linear-gradient(180deg, #e9e9e9, #fff);
}
.pages .current-page, .pagination .current { background: var(--select); font-weight: 700; }
.search-form { padding: 12px; margin: 0 0 14px; background: #f7f9fd; border: 1px solid #d6dced; font: 12px var(--ui); }
.toggler a { font-weight: 700; }
.cf-turnstile { margin: 4px 0; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 900px) {
	.y-hero { grid-template-columns: 1fr; }
	.y-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.y-top__inner { padding: 10px 16px 8px; }
	.y-brand { flex-direction: column; gap: 4px; }
	.y-brand__name { font-size: 26px; }
	.y-nav { padding: 0 16px 10px; }
	.y-nav__toggle { display: inline-block; }
	.y-nav__groups { display: none; flex-direction: column; margin-top: 8px; }
	.y-nav.is-open .y-nav__groups { display: flex; }
	.y-nav__label { width: 100%; text-align: left; }
	.y-nav__menu { position: static; box-shadow: none; }
	.y-shell { padding: 18px 16px 32px; }
	.y-win__body { padding: 14px; overflow-x: auto; }
	.y-buttons { margin: 14px -14px -14px; }
	.vertical-table th, .generic-form-table th { width: auto; }
	.generic-form-table, .generic-form-table tbody, .generic-form-table tr, .generic-form-table th, .generic-form-table td { display: block; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.y-btn:active, input[type=submit]:active { transform: none; }
}

/* ------------------------------------------------------------------ feedback */
.y-status { display: inline-block; padding: 1px 7px; font: 700 12px/1.6 var(--ui); border: 1px solid; }
.y-status--new     { color: #8a5a00; background: #fff6dc; border-color: #e3c97a; }
.y-status--planned { color: #1a3fb5; background: #eef2fa; border-color: #b7c6e6; }
.y-status--fixing  { color: #1a3fb5; background: #dfe8fb; border-color: #8ea9e0; }
.y-status--maybe, .y-status--wont { color: #555; background: #f2f2f2; border-color: #c9c9c9; }
.y-status--done    { color: var(--up); background: #e8f6ea; border-color: #9fd2a7; }
.y-details { margin: 14px 0; font: 12px var(--ui); }
.y-details summary { cursor: pointer; color: var(--label); font-weight: 700; }
.y-log { max-height: 360px; overflow: auto; padding: 10px; background: #1d1f24; color: #d7dae0; font: 12px/1.45 ui-monospace, monospace; white-space: pre-wrap; }
.y-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.y-shots img { border: 1px solid var(--frame); display: block; }
.y-note-item { margin: 0 0 10px; }
.y-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; font: 12px var(--ui); }
.y-filter a { padding: 3px 9px; border: 1px solid #a9a9a9; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #e9e9e9, #fff); }
.y-filter a[aria-current] { background: var(--select); font-weight: 700; }

/* ------------------------------------------------------------------ server information */
.y-lead { font-size: 16px; margin: 0 0 6px; }
.y-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; }
.y-kv th { width: 44%; }
.y-kv td { color: var(--ink); }
/* the client's option checkboxes: white square, dark edge, blue tick when on */
.y-checks { list-style: none; margin: 0; padding: 0; font: 12px/1.5 var(--ui); }
.y-checks li { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid #ececec; }
.y-box { flex: none; width: 13px; height: 13px; margin-top: 2px; background: #fff; border: 1px solid #6b6b6b; box-shadow: inset 1px 1px 0 #d5d5d5; position: relative; }
.y-checks .is-on .y-box::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #1a3fb5; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.y-checks .is-off { color: var(--ink-soft); }
.y-checks .is-off .y-box { background: #eee; }
.y-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 16px; }
.y-counts div { padding: 8px 10px; background: #f7f9fd; border: 1px solid #d6dced; }
.y-counts dt { font: 700 12px/1.5 var(--ui); color: var(--label); }
.y-counts dd { margin: 0; font: 700 18px/1.4 var(--ui); }
.y-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 18px; font: 12px var(--ui); }
.y-jobs li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #ececec; }
.y-win__body code { font: 12px var(--ui); padding: 0 4px; background: #eef2fa; border: 1px solid #d6dced; }
@media (max-width: 900px) { .y-info { grid-template-columns: 1fr; } }