/* Yanis Online Wiki. iRO Wiki's layout (side navigation, infobox on the right, tables,
   category links) in the Yanis website's dress: the game client's windows (title bar and orb
   from the 2010 client, grey frame, square corners), Galmuri pixel type for headings and
   interface text, Prontera's cobblestone underneath. Body text stays in the system font so long
   articles read easily. Tokens follow yanis-ro/server/fluxcp-site/yanis/css/yanis.css. */

@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: "Pixelify Sans"; src: url(fonts/pixelify.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
	--frame: #c2c2c2;
	--frame-dark: #848384;
	--panel: #fff;
	--stripe: #f2f2f2;
	--ink: #111;
	--ink-soft: #4a4a4a;
	--label: #3a4f8f;
	--head-bg: #eef2fa;
	--line: #d6dced;
	--select: #c9daf6;
	--link: #1a3fb5;
	--link-hover: #0a2580;
	--hover-1: #c0c7d4;
	--hover-2: #abbfe7;
	--hover-3: #ddeaf9;
	--up: #17722a;
	--down: #b3261e;
	--focus: #f5c518;
	--shade: rgba(0, 0, 0, .72);
	--ui: "Galmuri11", "Dotum", "Gulim", system-ui, sans-serif;
	--read: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	--pixel: "Pixelify Sans", "Galmuri11", system-ui, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

*, *::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: 16px/1.6 var(--read); color: var(--ink);
	background: #5d5a54 url(img/prontera-cobble.jpg) 0 0 / 512px 512px repeat;
}
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; height: auto; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 60; background: var(--panel); padding: 6px 10px; }
.num { font-variant-numeric: tabular-nums; }
.mono, code { font-family: var(--mono); font-size: .88em; }
code { padding: 0 4px; background: var(--head-bg); border: 1px solid var(--line); }
.muted { color: var(--ink-soft); }
.up { color: var(--up); font-weight: 700; }
.down { color: var(--down); font-weight: 700; }

/* ------------------------------------------------------------------ windows */
.win { background: var(--panel); border: 1px solid var(--frame); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); min-width: 0; }
.win__bar {
	display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px 4px 6px;
	background: url(img/titlebar.png) 0 0 / 24px 34px repeat-x; background-color: #dfe6f3;
	border-bottom: 2px solid #000; image-rendering: pixelated;
}
.win__bar::before { content: ""; flex: none; width: 22px; height: 22px; background: url(img/orb.png) center / 22px 22px no-repeat; image-rendering: pixelated; }
.win__title { margin: 0; font: 700 15px/1.25 var(--ui); color: #000; }
.page .win__title { font-size: 20px; }
.win__body { padding: 16px 20px 22px; }
.win__body::after { content: ""; display: block; clear: both; }

/* the client's buttons */
.btn {
	display: inline-block; padding: 6px 14px 5px; margin: 2px 0; font: 400 13px/1.2 var(--ui); color: #000; 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%);
}
.btn:hover, .btn--primary { color: #000; background: linear-gradient(180deg, var(--hover-1) 0%, #c6cfe1 12%, #abb9d6 26%, var(--hover-2) 45%, #b3c8f1 65%, var(--hover-3) 100%); }
.btn:active { transform: translate(1px, 1px); }

/* ------------------------------------------------------------------ top bar */
.top { background: var(--shade); border-bottom: 1px solid rgba(255, 255, 255, .15); position: relative; z-index: 20; }
.top__in { max-width: 1360px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand__name { font: 700 30px/1 var(--pixel); color: #fff; text-shadow: 3px 3px 0 #3f63b8; }
.brand__tag { font: 700 14px var(--ui); color: #d9e2f2; }
.menu-btn { display: none; }
.search { position: relative; margin-left: auto; display: flex; gap: 4px; flex: 0 1 420px; }
.sitelink { white-space: nowrap; margin: 0; padding: 7px 12px 6px; }
.foot__back { font-weight: 700; }
.search input { flex: 1; min-width: 0; font: 15px var(--read); padding: 6px 9px; border: 1px solid #a9a9a9; box-shadow: inset 1px 1px 0 #e3e3e3; background: #fff; color: var(--ink); }
.search__results {
	position: absolute; top: 100%; left: 0; right: 0; margin: 2px 0 0; padding: 2px; list-style: none; z-index: 40;
	background: var(--panel); border: 1px solid var(--frame); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); max-height: 70vh; overflow-y: auto;
}
.search__results a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 9px; color: var(--ink); text-decoration: none; }
.search__results a:hover, .search__results [aria-selected="true"] a { background: var(--select); }
.search__results small, .search-page small { color: var(--ink-soft); font: 12px var(--ui); white-space: nowrap; }

/* ------------------------------------------------------------------ shell: side nav + article */
.shell { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 22px 20px 36px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.side { background: var(--panel); border: 1px solid var(--frame); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); padding: 6px 0 10px; position: sticky; top: 12px; }
.nav-title { margin: 8px 12px 4px; font: 700 13px/1.4 var(--ui); color: var(--label); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side a { display: block; padding: 4px 12px 4px 16px; font: 13px/1.5 var(--ui); color: var(--link); text-decoration: none; }
.side a:hover { background: var(--select); color: var(--link-hover); }
.side a[aria-current] { font-weight: 700; color: #000; background: var(--head-bg); box-shadow: inset 3px 0 0 #3f63b8; }

.main { min-width: 0; }
.page h2 { font: 700 18px/1.3 var(--ui); margin: 28px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line); clear: none; }
.page h3 { font: 700 15px/1.3 var(--ui); margin: 20px 0 8px; color: var(--label); }
.page p, .page li { max-width: 78ch; }
.crumbs { font: 12px/1.5 var(--ui); color: var(--ink-soft); margin: -4px 0 12px; }
.crumbs a { color: var(--link); }
.lead { font-size: 18px; }
.note { font: 13px/1.6 var(--read); color: var(--ink-soft); margin: 6px 0 14px; }
.unsure { padding: 10px 14px; background: #fffbe6; border: 1px solid #d9c780; max-width: 78ch; }
.warn { padding: 10px 14px; background: #fff0ee; border: 1px solid #e3a49f; max-width: 78ch; }
.livelinks { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); clear: both; }
.cats { margin-top: 16px; padding: 8px 12px; background: #f7f9fd; border: 1px solid var(--line); font: 13px/1.6 var(--ui); clear: both; }
.cats a { margin: 0 4px; }
.cols { columns: 3 220px; column-gap: 24px; padding-left: 18px; margin: 8px 0 16px; }
.cols li { break-inside: avoid; margin-bottom: 2px; }
ul.plain { list-style: none; padding: 0; margin: 6px 0 0; }
pre.code { overflow-x: auto; padding: 10px 12px; background: #1d1f24; color: #e6e8ec; font: 13px/1.45 var(--mono); }
details summary { cursor: pointer; color: var(--label); font: 700 13px var(--ui); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ------------------------------------------------------------------ infobox (right) */
.infobox { float: right; width: 300px; margin: 0 0 18px 22px; font-size: 14px; }
.infobox .win__title { font-size: 14px; }
.infobox__pic { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; padding: 14px 10px; min-height: 60px;
	background: repeating-linear-gradient(45deg, #f6f8fc 0 6px, #eef2fa 6px 12px); border-bottom: 1px solid var(--line); }
.infobox__icon { align-self: center; }
.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; vertical-align: top; width: 42%; padding: 5px 10px; font: 700 12px/1.6 var(--ui); color: var(--label); background: var(--head-bg); border-bottom: 1px solid #e6e9f2; }
.kv td { padding: 5px 10px; border-bottom: 1px solid #eceff5; overflow-wrap: anywhere; }
.pair { display: inline-flex; gap: 12px; align-items: flex-end; }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; margin: 0 0 14px; max-width: 100%; }
.wt { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--frame); font-size: 14px; }
.wt th { text-align: left; font: 700 12px/1.4 var(--ui); color: var(--label); padding: 7px 10px; background: var(--head-bg); border: 1px solid var(--line); white-space: nowrap; }
.wt td { padding: 6px 10px; border: 1px solid #e6e6e6; vertical-align: middle; }
.wt tbody tr:nth-child(even) td { background: #fafbfd; }
.wt tbody tr:hover td { background: #eef4fe; }
.wt .r { text-align: right; }
.wt .pic { width: 1%; text-align: center; padding: 3px 6px; }
.wt[data-sort] th { cursor: pointer; }
.wt[data-sort] th[aria-sort="ascending"]::after { content: " \25B2"; }
.wt[data-sort] th[aria-sort="descending"]::after { content: " \25BC"; }
.wt--elements td, .wt--stats td { text-align: center; }
.wt--cards td:nth-child(2) { min-width: 240px; font-size: 13px; }
.kvt th { width: 34%; }
.wt caption { text-align: left; font: 700 13px var(--ui); padding: 4px 0; }

.ico { width: 24px; height: 24px; vertical-align: middle; flex: none; }
.ico--none { display: inline-block; }
.withico, .withsprite { display: inline-flex; align-items: center; gap: 6px; }
.spritebox { display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; vertical-align: middle; }
.spritebox img { max-height: 100%; width: auto; }
.mapthumb { border: 1px solid var(--frame); }

.badge { display: inline-block; padding: 0 6px; font: 700 11px/1.7 var(--ui); border: 1px solid #b7c6e6; background: var(--head-bg); color: var(--label); white-space: nowrap; vertical-align: middle; }
.badge--gold { background: #fff6dc; border-color: #d9b75a; color: #6b4d00; }
.badge--red { background: #fff0ee; border-color: #e3a49f; color: #8f1d17; }

/* game description text (client colours, darkened for contrast at build time) */
.gamedesc { padding: 12px 14px; background: #fcfcfd; border: 1px solid var(--line); max-width: 78ch; font-size: 15px; }
.gamedesc p { margin: 0 0 2px; }

/* ------------------------------------------------------------------ pictures */
.gallery { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 18px; }
.gallery__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; padding: 12px; min-width: 120px;
	background: repeating-linear-gradient(45deg, #f6f8fc 0 6px, #eef2fa 6px 12px); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.gallery__item figcaption, .gallery__item span { font: 12px var(--ui); }
a.gallery__item:hover { background: var(--select); }
.gallery--classes .gallery__item { min-width: 132px; }
.gallery--maps .gallery__item { min-width: 140px; }
.minimap { margin: 8px 0 18px; }
.minimap__wrap { position: relative; line-height: 0; border: 1px solid var(--frame); }
.minimap__wrap img { width: 100%; }
.minimap figcaption { font: 12px var(--ui); margin-top: 6px; color: var(--ink-soft); }
.mk { position: absolute; width: 11px; height: 11px; margin: -5px 0 0 -5px; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; }
.mk--warp { background: #e0473f; }
.mk--npc { background: #2f62d6; border-radius: 50% !important; width: 9px; height: 9px; margin: -4px 0 0 -4px; }
a.mk--warp:hover, a.mk--warp:focus-visible { transform: scale(1.5); z-index: 2; }
.mk--key { position: static; display: inline-block; margin: 0 4px 0 0; vertical-align: middle; }
.routes li { margin-bottom: 8px; }
.moblist { list-style: none; margin: 0; padding: 0; }
.moblist li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 1px 0; }
.routes ol { margin: 4px 0 0; font-size: 14px; }

/* ------------------------------------------------------------------ main page */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.hero__art { display: flex; align-items: flex-end; gap: 18px; padding: 14px 18px; background: repeating-linear-gradient(45deg, #f6f8fc 0 6px, #eef2fa 6px 12px); border: 1px solid var(--line); }
.tiles { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tiles a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px; text-decoration: none; color: var(--ink); border: 1px solid #a9a9a9; border-bottom-color: var(--frame-dark);
	background: linear-gradient(180deg, #eee 0%, #fff 60%, #fbfbfb 100%); }
.tiles a:hover { background: linear-gradient(180deg, var(--hover-1) 0%, var(--hover-2) 45%, var(--hover-3) 100%); }
.tiles strong { font: 700 15px var(--ui); color: var(--link); }
.tiles span { font-size: 13px; color: var(--ink-soft); }
.cards { list-style: none; padding: 0; display: grid; gap: 10px; }
.cards li { padding: 10px 14px; border: 1px solid var(--line); background: #fafbfd; max-width: none; }
.checks { list-style: none; padding: 0; }
.checks li { padding: 4px 0 4px 24px; position: relative; border-bottom: 1px solid #eceff5; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 12px; border: 1px solid #6b6b6b; background: #fff; }
.checks li.on::after { content: ""; position: absolute; left: 6px; top: 9px; width: 4px; height: 8px; border: solid var(--link); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checks li.off { color: var(--ink-soft); }
.pager { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.pager a { padding: 3px 10px; border: 1px solid #a9a9a9; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #e9e9e9, #fff); font: 13px var(--ui); }
.pager a[aria-current] { background: var(--select); font-weight: 700; }
.search-page li { margin-bottom: 6px; }

/* ------------------------------------------------------------------ quest walkthroughs */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.step { margin: 0 0 16px; padding: 10px 12px 8px; border: 1px solid var(--line); background: #fcfdff; max-width: none; }
.step__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 8px !important; font: 400 15px/1.5 var(--read) !important; color: var(--ink) !important; }
.step__n { display: inline-block; min-width: 26px; padding: 1px 6px; text-align: center; font: 700 13px/1.6 var(--ui); color: #fff; background: #3f63b8; border: 1px solid #2c4a90; }
.kv--step th { width: 130px; }
.kv--step td, .kv--step th { font-size: 14px; }
.said { margin: 8px 0 4px; padding: 6px 12px; border-left: 3px solid #b7c6e6; background: #f7f9fd; font-size: 14px; color: #333; }
.said p { margin: 0; }
.step--pic { position: relative; padding-right: 84px; }
.step__pic { position: absolute; right: 10px; top: 10px; width: 64px; display: flex; justify-content: center; }
.step__src { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.step__src code { font-size: 11px; }
@media (max-width: 860px) { .kv--step th { width: 96px; } .step--pic { padding-right: 12px; } .step__pic { position: static; float: right; margin: 0 0 6px 8px; } }

/* ------------------------------------------------------------------ foot */
.foot { color: #eee; font: 13px/1.6 var(--read); text-align: center; padding: 14px 20px 20px; background: var(--shade); }
.foot p { margin: 4px auto; max-width: 90ch; }
.foot a { color: #cfe0ff; }
.foot__small { color: #d4d9e2; font-size: 12px; }
.foot code { background: transparent; border-color: #666; color: #fff; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1080px) {
	.infobox { width: 260px; }
}
@media (max-width: 860px) {
	.top__in { padding: 10px 16px; gap: 10px; }
	.menu-btn { display: inline-block; order: 2; margin-left: auto; }
	.brand { order: 1; }
	.brand__name { font-size: 24px; }
	.search { order: 3; flex: 1 1 180px; margin-left: 0; min-width: 0; }
	.sitelink { order: 4; }
	.shell { grid-template-columns: 1fr; padding: 14px 16px 28px; gap: 14px; }
	.side { display: none; position: static; }
	.side.is-open { display: block; }
	.infobox { float: none; width: 100%; margin: 0 0 18px; }
	.win__body { padding: 14px 14px 18px; }
	.page .win__title { font-size: 17px; }
	.hero { grid-template-columns: 1fr; }
	.hero__art { justify-content: center; }
	.wt { font-size: 13px; }
	.wt th, .wt td { padding: 5px 7px; }
}
@media (max-width: 1100px) {
	.sitelink__long { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.btn:active { transform: none; }
}