/* Dillei Online - the presentation site. Colours follow the game's own panels (dark navy, the gold of the logo, the
blue of the in-game buttons); headings use a pixel font like the game's interface. Everything is served from this
site (the font too, fonts/OFL.txt): no request leaves it, so the security policy can stay strict. */
@font-face {
font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url(/fonts/pixelify-sans-latin-ext.woff2?v=089e3b44cf) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url(/fonts/pixelify-sans-latin.woff2?v=63df77cc47) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--bg: #0d1017;
--bg-alt: #121722;
--panel: #171d2a;
--line: #2a3246;
--text: #e9e5da;
--muted: #a3abbd;
--gold: #f2b632;
--gold-hi: #ffd56b;
--gold-lo: #b9800f;
--blue: #3557ff;
--green: #5fd068;
--violet: #b28cff;
--pixel: "Pixelify Sans", ui-monospace, monospace;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--wrap: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
font-variant-ligatures: none; } /* the pixel font joins "fi" into one odd glyph */
img { max-width: 100%; }
a { color: var(--gold-hi); }
a:hover { color: #fff; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 700; line-height: 1.15; letter-spacing: .01em; margin: 0 0 .5em; }
h2 { font-size: clamp(30px, 4.4vw, 46px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
i { color: var(--gold-hi); font-style: normal; font-family: var(--pixel); letter-spacing: .03em; }
kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; margin: 0 2px; border: 1px solid var(--line); border-bottom-width: 3px;
border-radius: 5px; background: #1d2433; font: 600 13px/1.5 var(--sans); text-align: center; color: var(--text); }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #000; padding: 8px 12px; z-index: 50; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
.sec { padding: 96px 0; }
.sec-alt { background: var(--bg-alt); border-block: 1px solid #1b2131; }
.eyebrow { font-family: var(--pixel); color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: 15px; margin-bottom: 10px; }
.intro { color: var(--muted); max-width: 760px; font-size: 18px; margin-bottom: 36px; }
.sub { margin-top: 64px; font-size: 28px; }
/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 10px; font: 700 18px/1 var(--pixel);
letter-spacing: .02em; text-decoration: none; border: 2px solid transparent; transition: transform .12s, filter .12s, background .12s; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(#ffcf55, #e9a21c); color: #2a1a00; border-color: #8a5c08; box-shadow: 0 3px 0 #8a5c08, 0 10px 30px rgba(242,182,50,.25); }
.btn-gold:hover { color: #1a1000; filter: brightness(1.07); }
.btn-ghost { background: rgba(13,16,23,.55); color: var(--text); border-color: #3a4560; }
.btn-ghost:hover { border-color: var(--gold); color: #fff; }
.btn-sm { padding: 9px 16px; font-size: 16px; box-shadow: 0 2px 0 #8a5c08; }
.btn-off { background: #1b2130; color: #8a93a8; border-color: #2e3649; cursor: default; }
.btn-off:hover { transform: none; }
/* the header and footer: the same on every page (the home page, the wiki, the world pages, the Supporter page) */
/* the header and footer of every page - written by tools/site_menu.py, change them there */
.sh{position:sticky;top:0;z-index:40;background:rgba(13,16,23,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 #1d2435;
color:#e9e5da;font:600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:normal}
.sh *,.sh-foot *{box-sizing:border-box}
.sh-in{max-width:1240px;height:58px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px}
.sh a{text-decoration:none}
.sh-brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:#e9e5da;font:700 21px/1 "Pixelify Sans",ui-monospace,monospace;white-space:nowrap}
.sh-brand img{display:block;width:36px;height:36px;border-radius:6px}
.sh-brand:hover{color:#fff;text-decoration:none}
.sh-nav{display:flex;gap:18px}
.sh-nav a{color:#a3abbd;white-space:nowrap;padding:8px 0}
.sh-nav a:hover{color:#ffd56b;text-decoration:none}
.sh-nav a[aria-current]{color:#ffd56b;box-shadow:inset 0 -2px 0 #f2b632}
.sh-btn{display:inline-flex;align-items:center;gap:8px;padding:0 15px;height:38px;border:1px solid;border-radius:10px;white-space:nowrap;
font:700 16px/1 "Pixelify Sans",ui-monospace,monospace;letter-spacing:.02em;transition:filter .12s,border-color .12s,color .12s}
.sh-dl{background:linear-gradient(#ffcf55,#e9a21c);color:#2a1a00;border-color:#8a5c08;box-shadow:0 2px 0 #8a5c08}
.sh-dl:hover{color:#1a1000;filter:brightness(1.08);text-decoration:none}
.sh-dc{background:rgba(13,16,23,.55);color:#e9e5da;border-color:#3a4560}
.sh-dc:hover{color:#fff;border-color:#f2b632;text-decoration:none}
.sh-win{display:block;flex:none}
.sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-menu{display:none;position:relative}
.sh-menu summary{list-style:none;cursor:pointer;width:42px;height:38px;display:grid;place-content:center;gap:5px;border:1px solid #2a3246;border-radius:8px}
.sh-menu summary::-webkit-details-marker{display:none}
.sh-menu summary span{display:block;width:20px;height:2px;background:#e9e5da;transition:transform .15s,opacity .15s}
.sh-menu[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sh-menu[open] summary span:nth-child(2){opacity:0}
.sh-menu[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sh-menu nav{position:absolute;right:0;top:48px;z-index:41;display:grid;min-width:220px;padding:8px;background:#171d2a;border:1px solid #2a3246;border-radius:10px;
box-shadow:0 16px 40px rgba(0,0,0,.55)}
.sh-menu nav a{padding:11px 12px;color:#e9e5da;border-radius:6px;font-size:16px}
.sh-menu nav a:hover,.sh-menu nav a[aria-current]{background:#222a3c;color:#ffd56b;text-decoration:none}
.sh-menu .sh-mdc{display:none;margin-top:6px;border-top:1px solid #2a3246;border-radius:0 0 6px 6px;padding-top:14px}
.sh-foot{border-top:1px solid #1d2435;background:#0d1017;color:#a3abbd;font:400 14px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.sh-foot-in{max-width:1240px;margin:0 auto;padding:26px 20px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.sh-foot p{margin:0}
.sh-tag{display:flex;align-items:center;gap:10px}
.sh-tag img{display:block;width:28px;height:28px;border-radius:5px}
.sh-tag b{color:#e9e5da;font:700 16px "Pixelify Sans",ui-monospace,monospace}
.sh-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.sh-foot a{color:#a3abbd;text-decoration:none}
.sh-foot a:hover{color:#ffd56b;text-decoration:none}
.sh-copy{flex-basis:100%;color:#7d8599;font-size:13px}
@media (max-width:1250px){.sh-nav{display:none}.sh-menu{display:block}} /* nine links since 0.34.0: the menu folds sooner */
@media (max-width:720px){
.sh-in{height:54px;gap:10px;padding:0 16px}
.sh-brand{gap:8px;font-size:18px}.sh-brand img{width:32px;height:32px}
.sh-dc{display:none}.sh-menu .sh-mdc{display:block}
.sh-btn{padding:0 12px;height:36px;font-size:15px}
.sh-menu summary{width:40px;height:36px}.sh-menu nav{top:44px}
.sh-foot-in{padding:22px 16px 26px}
}
@media (max-width:359px){.sh-brand span{display:none}}
/* */
/* the opening picture */
.hero { position: relative; background: #08101c; }
.hero-art { display: block; width: 100%; height: min(86vh, 56.3vw); min-height: 340px; object-fit: cover; object-position: 50% 0; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to bottom, rgba(13,16,23,0), var(--bg) 92%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; max-width: 860px; margin: -104px auto 0; padding: 0 20px 40px; text-align: center; }
.hero h1 { font-size: clamp(32px, 5vw, 58px); text-shadow: 0 3px 0 #000, 0 0 30px rgba(0,0,0,.6); }
.kicker { display: inline-block; font: 600 14px var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--green);
border: 1px solid rgba(95,208,104,.5); background: rgba(10,30,14,.6); padding: 4px 12px; border-radius: 99px; margin-bottom: 16px; }
.lead { font-size: 19px; color: #d8d4ca; max-width: 680px; margin: 0 auto 28px; }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* the game */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; color: #d6d2c8; }
.pillars { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillars li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.pillars b { display: block; font: 700 18px var(--pixel); color: var(--gold-hi); margin-bottom: 6px; }
.pillars span { color: var(--muted); font-size: 15px; }
/* classes */
.cards.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.class-card { position: relative; overflow: hidden; }
.class-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.class-card.warrior { --c: #e0574f; }
.class-card.ranger { --c: #5fd068; }
.class-card.mage { --c: #6f8cff; }
.portrait { height: 180px; display: grid; place-items: end center; margin: -6px -26px 18px; padding-bottom: 14px;
background: radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%); border-bottom: 1px solid var(--line); }
.portrait img { transition: transform .25s; }
.class-card:hover .portrait img { transform: translateY(-4px); }
.class-card h3 { font-size: 28px; margin-bottom: 2px; }
.role { color: var(--c); font-weight: 700; margin-bottom: 12px; }
.class-card p { color: #d6d2c8; font-size: 16px; }
.words { color: var(--muted) !important; font-size: 15px !important; margin: 0; }
/* magic */
.split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.split p { color: #d6d2c8; }
.lexicon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
.lexicon div { display: flex; justify-content: space-between; align-items: baseline; background: var(--panel); border: 1px solid var(--line);
border-left: 3px solid var(--violet); border-radius: 8px; padding: 10px 14px; }
.lexicon dt { font: 700 22px var(--pixel); color: var(--gold-hi); }
.lexicon dd { margin: 0; color: var(--muted); font-size: 15px; }
/* world */
.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.region { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.region h3 { color: var(--gold-hi); }
.region p { color: var(--muted); font-size: 16px; margin: 0; }
.bestiary { list-style: none; margin: 0; padding: 26px 18px 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 22px 26px;
background: radial-gradient(120% 90% at 50% 100%, #1b2a1d 0%, #121722 60%); border: 1px solid var(--line); border-radius: 14px; }
.bestiary li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bestiary img { height: auto; filter: drop-shadow(0 6px 4px rgba(0,0,0,.45)); } /* 3x by their width attribute */
.bestiary span { font: 500 13px var(--pixel); color: var(--muted); white-space: nowrap; }
/* each creature leads to its page in the wiki */
.bestiary a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; border-radius: 10px; }
.bestiary a:hover span, .bestiary a:focus-visible span { color: var(--gold); }
/* features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.features article { padding: 22px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, #161c29, #131824); }
.features h3 { font-size: 21px; color: var(--gold-hi); }
.features p { color: var(--muted); font-size: 16px; margin: 0; }
/* how to play */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps li { counter-increment: s; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 54px 20px 20px; }
.steps li::before { content: counter(s); position: absolute; top: 16px; left: 20px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
background: var(--gold); color: #2a1a00; font: 700 18px var(--pixel); }
.steps p { color: var(--muted); font-size: 16px; margin: 0; }
.controls { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.controls table { width: 100%; border-collapse: collapse; }
.controls th, .controls td { text-align: left; padding: 11px 8px; border-top: 1px solid #222a3b; vertical-align: top; }
.controls tr:first-child th, .controls tr:first-child td { border-top: 0; }
.controls th { width: 210px; color: var(--gold-hi); font-weight: 700; }
.controls td { color: #d6d2c8; }
.note { color: var(--muted); margin: 14px 0 0; font-size: 15px; }
/* roadmap */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 18px; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--gold), #2a3246); }
.timeline > li { position: relative; margin-left: 46px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
.timeline > li::before { content: ""; position: absolute; left: -38px; top: 22px; width: 16px; height: 16px; border-radius: 4px; background: var(--k); box-shadow: 0 0 0 4px var(--bg); }
.timeline .doing { --k: var(--gold); }
.timeline .planned { --k: #6f7a93; }
.timeline .review { --k: var(--violet); }
.timeline .live { --k: #6fd08c; }
.tl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-head h3 { margin: 0; }
.chip { font: 600 13px var(--pixel); letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px;
color: var(--k); border: 1px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 12%, transparent); }
.timeline ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 16px; }
.timeline ul li { margin: 3px 0; }
/* community */
.community { text-align: center; }
.community .intro { margin-inline: auto; }
.socials { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.socials a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line);
background: var(--panel); color: var(--text); text-decoration: none; font-weight: 700; }
.socials a:hover { border-color: var(--gold); color: var(--gold-hi); }
.socials svg { width: 22px; height: 22px; }
.mail { color: var(--muted); }
/* questions */
#faq details { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; margin-bottom: 10px; }
#faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: "+"; font: 700 22px/1 var(--pixel); color: var(--gold); }
#faq details[open] summary::after { content: "−"; }
#faq details p { padding: 0 20px 16px; margin: 0; color: var(--muted); }
/* last call + footer */
.final { padding: 80px 0 90px; text-align: center; background: radial-gradient(70% 90% at 50% 0%, #1a2238, var(--bg) 70%); }
.final img { display: block; margin: 0 auto 10px; height: auto; }
.final p { font: 500 20px var(--pixel); color: var(--muted); margin-bottom: 24px; }
.final .cta { justify-content: center; }
.lost { min-height: calc(100vh - 58px - 150px); display: grid; place-items: center; }
.lost h1 { font-size: clamp(30px, 5vw, 48px); }
.lost img { width: 56px; }
/* smaller screens */
@media (max-width: 1000px) {
.pillars { grid-template-columns: repeat(2, 1fr); }
.regions, .features { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
body { font-size: 16px; }
.sec { padding: 64px 0; }
.hero-art { height: auto; min-height: 0; }
.hero-copy { margin-top: -40px; text-align: left; }
.lead { margin-left: 0; }
.cta { justify-content: flex-start; }
.cols, .cards.three, .regions, .features, .steps, .pillars { grid-template-columns: 1fr; }
.bestiary { gap: 16px 18px; }
.bestiary img { zoom: .67; } /* 2x on a phone */
.controls th { width: auto; display: block; padding-bottom: 0; border-top: 1px solid #222a3b; }
.controls td { display: block; border-top: 0; padding-top: 4px; }
.wrap { padding: 0 16px; }
}
/* game photos */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.shots figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.shots a { display: block; }
.shots img { display: block; width: 100%; height: auto; transition: transform .3s; }
.shots a:hover img { transform: scale(1.03); }
.shots figcaption { padding: 12px 16px 14px; color: var(--muted); font-size: 15px; }
@media (max-width: 720px) { .shots { grid-template-columns: 1fr; } }
/* the slideshow: a photo opens full size over the page (#view- is the target), the previous and the next one
a click away; a click beside the photo or on the cross closes it. CSS only - the page runs no script. */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
padding: 56px 72px 32px; background: rgba(5, 7, 12, .94); }
.lightbox:target { display: flex; }
.lb-back { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox figure { position: relative; margin: 0; max-width: min(1500px, 100%); }
.lightbox img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 140px); margin: 0 auto;
border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.lightbox figcaption { color: var(--text); text-align: center; padding-top: 12px; font-size: 16px; }
.lightbox figcaption span { color: var(--muted); margin-left: 10px; font: 500 14px var(--pixel); }
.lb-prev, .lb-next, .lb-close { position: absolute; display: grid; place-items: center; text-decoration: none; color: var(--text);
background: rgba(23, 29, 42, .88); border: 1px solid var(--line); border-radius: 10px; font: 700 34px/1 var(--pixel); }
.lb-prev, .lb-next { top: 50%; width: 48px; height: 72px; margin-top: -36px; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-close { top: 10px; right: 12px; width: 44px; height: 44px; font-size: 28px; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover { border-color: var(--gold); color: var(--gold-hi); }
@media (max-width: 720px) {
.lightbox { padding: 56px 8px 72px; }
.lb-prev, .lb-next { top: auto; bottom: 12px; margin-top: 0; width: 64px; height: 48px; }
.lb-prev { left: calc(50% - 76px); } .lb-next { right: calc(50% - 76px); }
}
/* a link on to the wiki, under a short part of this page (the wiki has the details: one place for each thing) */
.more { margin: 26px 0 0; font: 600 17px var(--pixel); letter-spacing: .02em; }
.more a { text-decoration: none; border-bottom: 1px solid rgba(255, 213, 107, .35); }
.more a:hover { border-color: #fff; }
.split .more { margin-top: 18px; }
.btn svg { flex: none; }
.nw { white-space: nowrap; }
/* numbers in prices and bonuses: the pixel font's bold 5 reads like an 8, so they are set in the plain font */
.num { font-family: var(--sans); font-weight: 800; letter-spacing: 0; }
/* how to play: on to Getting started */
.next { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; background: var(--panel);
border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 14px; padding: 22px 26px; }
.next h3 { margin-bottom: 4px; }
.next p { color: var(--muted); margin: 0; max-width: 720px; }
/* the supporter band on the home page */
.band { padding: 64px 0; background: radial-gradient(60% 120% at 15% 50%, #2a2310 0%, #121722 55%, var(--bg) 100%); border-block: 1px solid #2a2414; }
.band-in { display: flex; align-items: center; gap: 36px; }
.band-coin { flex: none; filter: drop-shadow(0 10px 24px rgba(242, 182, 50, .28)); }
/* the coin's (WebP first, the PNG for browsers without it) takes no box: the coin lays out as the bare ![]()
did
(its would otherwise count as an item of a flex row and take a gap of its own) */
.pic-coin { display: contents; }
.pic-coin source { display: none; }
.band h2 { font-size: clamp(26px, 3.4vw, 38px); }
.band p { color: #d6d2c8; max-width: 720px; }
/* the Supporter page */
.sup-hero { position: relative; overflow: hidden; padding: 72px 0 64px;
background: radial-gradient(55% 90% at 78% 40%, #3a2c0c 0%, rgba(58, 44, 12, 0) 70%), radial-gradient(80% 80% at 20% 0%, #1a2238, var(--bg) 70%); }
.sup-hero-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.sup-hero h1 { font-size: clamp(34px, 5vw, 56px); text-shadow: 0 3px 0 #000; }
.sup-hero .lead { margin: 0 0 22px; }
.sup-hero .cta { justify-content: flex-start; margin-top: 22px; }
.sup-price { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 10px 16px; border-radius: 12px;
background: rgba(242, 182, 50, .1); border: 1px solid rgba(242, 182, 50, .45); font: 600 18px var(--pixel); color: var(--gold-hi); }
.sup-price b { font-size: 24px; }
.sup-price .sup-eq { color: var(--text); }
.sup-soon { margin: 12px 0 0; color: var(--green); font: 600 15px var(--pixel); letter-spacing: .04em; }
.sup-coin { display: grid; place-items: center; }
.sup-coin img { width: min(300px, 70vw); height: auto; filter: drop-shadow(0 18px 40px rgba(242, 182, 50, .3)) drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
animation: coin-float 5s ease-in-out infinite; }
@keyframes coin-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
/* the supporter page: free beside supporter, a row for each thing the server gives a supporter (pedro 2026-10-19: "a table,
the table will mark things that a support have that a regular dont instead of the cards of benefit") */
.cmp-wrap { overflow-x: auto; margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.cmp { width: 100%; border-collapse: collapse; font-size: 16px; }
.cmp th, .cmp td { padding: 14px 20px; border-top: 1px solid #222a3b; vertical-align: middle; text-align: left; }
.cmp thead th { border-top: 0; font: 700 19px/1.2 var(--pixel); letter-spacing: .02em; background: linear-gradient(#242c41, #1b2233); }
.cmp thead th.s { color: var(--gold-hi); white-space: nowrap; }
.cmp thead th.s img, .cmp .price img { vertical-align: -5px; margin-right: 4px; }
.cmp td { width: 27%; text-align: center; color: #d6d2c8; }
.cmp .s { background: rgba(242, 182, 50, .07); box-shadow: inset 1px 0 0 rgba(242, 182, 50, .25); }
.cmp tbody th { font-weight: 600; color: var(--text); }
.cmp tbody th small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 14px; line-height: 1.4; }
.cmp b { color: var(--gold-hi); }
.cmp svg.yes { display: inline-block; color: var(--green); vertical-align: -4px; }
.cmp .no { color: #59617a; font-weight: 700; }
.cmp tr.price th, .cmp tr.price td { border-top: 2px solid var(--line); font-size: 17px; }
.cmp .sr, .cmp caption.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-after { margin: 18px 0 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
@media (max-width: 640px) {
.cmp th, .cmp td { padding: 11px 10px; font-size: 15px; }
.cmp thead th { font-size: 15px; padding: 11px 8px; }
.cmp thead th.s { white-space: normal; text-align: center; }
.cmp thead th.s img { display: block; margin: 0 auto 4px; }
.cmp td { width: 30%; }
}
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.perk { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px 20px; }
.perk-ico { display: block; width: 36px; height: 36px; color: var(--gold-hi); margin-bottom: 14px; filter: drop-shadow(0 2px 0 #4a2f05); }
.perk h3 { font-size: 21px; color: var(--gold-hi); margin-bottom: 8px; }
.perk p { color: #d6d2c8; font-size: 16px; margin: 0; }
.perk .perk-was { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.perk-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
background: linear-gradient(160deg, #2a2310, var(--panel) 70%); border-color: rgba(242, 182, 50, .45); }
.perk-cta img { filter: drop-shadow(0 6px 14px rgba(242, 182, 50, .3)); }
.perk-cta h3 { margin: 0; }
.perk-cta .btn { margin-top: auto; }
.ends-ico { display: inline-block; width: 30px; height: 30px; color: var(--green); vertical-align: -3px; margin-right: 6px; }
.sup-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sup-list li { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 10px; padding: 14px 18px; color: #d6d2c8; }
.sup-list b { color: var(--text); }
.spend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.spend-card { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.spend-card p { color: #d6d2c8; font-size: 16px; margin: 0; }
.spend-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.spend-head h3 { margin: 0; color: var(--gold-hi); }
.cost { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 16px var(--pixel); color: var(--muted); white-space: nowrap; }
.cost b { color: var(--gold-hi); font-size: 19px; }
.spend-link { margin-top: auto; font: 600 16px var(--pixel); text-decoration: none; }
.bonus-kinds { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bonus-kinds li { padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(95, 208, 104, .45); background: rgba(95, 208, 104, .08); color: var(--text); font-size: 15px; }
.bonus-kinds b { color: var(--green); }
.outfits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.outfit-class { --c: var(--gold); border-top: 4px solid var(--c); background: var(--bg-alt); border-radius: 14px; padding: 18px; display: grid; gap: 14px; align-content: start; }
.outfit-class.warrior { --c: #e0574f; }
.outfit-class.ranger { --c: #5fd068; }
.outfit-class.mage { --c: #6f8cff; }
.outfit-class h4 { margin: 0; font: 700 24px var(--pixel); color: var(--c); }
.outfit { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.outfit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.outfit h5 { margin: 0; font: 700 20px var(--pixel); color: var(--text); }
.outfit p { color: #d6d2c8; font-size: 15px; margin: 0 0 10px; }
.outfit dl { margin: 0; display: grid; gap: 4px; font-size: 14px; }
.outfit dl div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; }
.outfit dt { color: var(--c); font-weight: 700; }
.outfit dd { margin: 0; color: var(--muted); }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1060px; }
@media (max-width: 1000px) { .packs { grid-template-columns: repeat(2, 1fr); } }
.pack { text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 16px 18px; }
.pack img { display: block; margin: 0 auto 10px; filter: drop-shadow(0 6px 12px rgba(242, 182, 50, .25)); }
.pack h3 { font-size: 22px; margin-bottom: 6px; }
.pack h3 b { color: var(--gold-hi); }
.pack .price { font: 800 26px var(--sans); color: var(--text); margin: 0; }
.pack .price-alt { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.pack-best { border-color: rgba(242, 182, 50, .55); background: linear-gradient(180deg, #2a2310, var(--panel) 75%); }
.sup-how { color: #d6d2c8; max-width: 860px; margin: 26px 0 0; }
.sup-qa { margin: 26px 0 0; display: grid; gap: 14px; max-width: 860px; }
.sup-qa dt { font-weight: 700; color: var(--text); }
.sup-qa dd { margin: 2px 0 0; color: var(--muted); }
.sup .final p { margin-bottom: 24px; }
@media (max-width: 1000px) {
.perks { grid-template-columns: repeat(2, 1fr); }
.spend, .outfits { grid-template-columns: 1fr; }
.outfit-class { grid-template-columns: 1fr 1fr; }
.outfit-class h4 { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.band { padding: 48px 0; }
.band-in { flex-direction: column; align-items: flex-start; gap: 18px; }
.band-coin { width: 110px; height: auto; }
.next { padding: 18px; }
.sup-hero { padding: 40px 0 44px; }
.sup-hero-in { grid-template-columns: 1fr; gap: 10px; }
.sup-coin { order: -1; justify-items: start; }
.sup-coin img { width: 150px; }
.perks, .packs { grid-template-columns: 1fr; }
.outfit-class { grid-template-columns: 1fr; }
}
/* The world pages' header and footer as the game server sent them before the shared menu (WorldPages.cs, class Site):
kept so /online looks right whichever of the website and the game server is updated first - remove after the game
server's next deploy. */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(13,16,23,.86); backdrop-filter: blur(8px); border-bottom: 1px solid #1d2435; }
.bar-in { max-width: var(--wrap); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 700 21px var(--pixel); margin-right: auto; }
.brand img { border-radius: 6px; }
.nav { display: flex; gap: 20px; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav a:hover { color: var(--gold-hi); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 42px; height: 38px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 20px; height: 2px; background: var(--text); }
.menu nav { position: absolute; right: 0; top: 48px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; min-width: 200px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.menu nav a { padding: 10px 12px; color: var(--text); text-decoration: none; border-radius: 6px; }
.menu nav a:hover { background: #222a3c; }
.foot { border-top: 1px solid #1d2435; padding: 26px 0; color: var(--muted); font-size: 14px; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot p { margin: 0; }
.foot nav { display: flex; gap: 18px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--gold-hi); }
@media (max-width: 1000px) { .nav { display: none; } .menu { display: block; } }
@media (max-width: 720px) { .bar-in { gap: 12px; padding: 8px 16px; } .brand { font-size: 18px; } }
/* written by tools/cosmetics_art.py --web: the cosmetic outfits' pictures on the supporter page */
.outfits { grid-template-columns: 1fr; }
.outfit-class { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.outfit-class h4 { grid-column: 1 / -1; }
.of-top { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; margin: -8px 0 10px -12px; }
.of-top p { margin: 0; }
.of-fig { --f: 144px; width: var(--f); height: var(--f); background: no-repeat 0 0 / calc(var(--f) * 4) var(--f); image-rendering: pixelated; animation: of-walk .72s steps(4) infinite; }
.of-fx { --t: 96px; display: grid; grid-template-columns: repeat(3, var(--t)); gap: 9px; margin: 0; }
.of-fx figure { margin: 0; }
.of-tile { width: var(--t); height: var(--t); border-radius: 8px; background: no-repeat 0 0 / calc(var(--t) * 16) var(--t); image-rendering: pixelated; animation: of-16 1.92s steps(16) infinite; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.of-fx figcaption { font: 600 13px var(--pixel); color: var(--c); margin-top: 6px; text-align: center; }
@keyframes of-walk { to { background-position: calc(var(--f) * -4) 0; } }
@keyframes of-16 { to { background-position: calc(var(--t) * -16) 0; } }
@media (max-width: 720px) { .outfit-class { grid-template-columns: 1fr; } .of-fx { --t: 64px; } .of-fig { --f: 108px; } }
@media (prefers-reduced-motion: reduce) { .of-fig, .of-tile { animation: none; } }
.of-fig.lionguard { background-image: url(/assets/outfits/lionguard.png?v=5740b1517d); }
.of-spell.lionguard { background-image: url(/assets/outfits/lionguard-spell.png?v=183b72ede3); }
.of-tomb.lionguard { background-image: url(/assets/outfits/lionguard-tomb.png?v=dc1db6ed69); }
.of-trail.lionguard { background-image: url(/assets/outfits/lionguard-trail.png?v=8ce2ac7de3); }
.of-fig.bloodfang { background-image: url(/assets/outfits/bloodfang.png?v=0a296bf9d0); }
.of-spell.bloodfang { background-image: url(/assets/outfits/bloodfang-spell.png?v=38ff01c316); }
.of-tomb.bloodfang { background-image: url(/assets/outfits/bloodfang-tomb.png?v=8c7ea89903); }
.of-trail.bloodfang { background-image: url(/assets/outfits/bloodfang-trail.png?v=d7df307578); }
.of-fig.wildwarden { background-image: url(/assets/outfits/wildwarden.png?v=3ccc6f0dd7); }
.of-spell.wildwarden { background-image: url(/assets/outfits/wildwarden-spell.png?v=5d97fa5cc2); }
.of-tomb.wildwarden { background-image: url(/assets/outfits/wildwarden-tomb.png?v=579cf94339); }
.of-trail.wildwarden { background-image: url(/assets/outfits/wildwarden-trail.png?v=2b0df45777); }
.of-fig.duskstalker { background-image: url(/assets/outfits/duskstalker.png?v=c6bf4209fb); }
.of-spell.duskstalker { background-image: url(/assets/outfits/duskstalker-spell.png?v=d31f77d8cb); }
.of-tomb.duskstalker { background-image: url(/assets/outfits/duskstalker-tomb.png?v=d2f06b7e41); }
.of-trail.duskstalker { background-image: url(/assets/outfits/duskstalker-trail.png?v=d9302c5eb0); }
.of-fig.frostweaver { background-image: url(/assets/outfits/frostweaver.png?v=62e0e59937); }
.of-spell.frostweaver { background-image: url(/assets/outfits/frostweaver-spell.png?v=5a69440ee2); }
.of-tomb.frostweaver { background-image: url(/assets/outfits/frostweaver-tomb.png?v=4cf28d53ee); }
.of-trail.frostweaver { background-image: url(/assets/outfits/frostweaver-trail.png?v=a49fe5b667); }
.of-fig.voidcaller { background-image: url(/assets/outfits/voidcaller.png?v=31703c4ea5); }
.of-spell.voidcaller { background-image: url(/assets/outfits/voidcaller-spell.png?v=f1d20da1cf); }
.of-tomb.voidcaller { background-image: url(/assets/outfits/voidcaller-tomb.png?v=f573062188); }
.of-trail.voidcaller { background-image: url(/assets/outfits/voidcaller-trail.png?v=1a5f511050); }
.of-fig.emberforge { background-image: url(/assets/outfits/emberforge.png?v=a1a01257d9); }
.of-spell.emberforge { background-image: url(/assets/outfits/emberforge-spell.png?v=22563ccb4a); }
.of-tomb.emberforge { background-image: url(/assets/outfits/emberforge-tomb.png?v=d0e0d8eaa3); }
.of-trail.emberforge { background-image: url(/assets/outfits/emberforge-trail.png?v=9f1bbb40a3); }
.of-fig.stormguard { background-image: url(/assets/outfits/stormguard.png?v=5311c5c3c5); }
.of-spell.stormguard { background-image: url(/assets/outfits/stormguard-spell.png?v=e69807588a); }
.of-tomb.stormguard { background-image: url(/assets/outfits/stormguard-tomb.png?v=2bc43f022e); }
.of-trail.stormguard { background-image: url(/assets/outfits/stormguard-trail.png?v=e9dca81759); }
.of-fig.dreadknight { background-image: url(/assets/outfits/dreadknight.png?v=184d5b1e0a); }
.of-spell.dreadknight { background-image: url(/assets/outfits/dreadknight-spell.png?v=66103e7289); }
.of-tomb.dreadknight { background-image: url(/assets/outfits/dreadknight-tomb.png?v=d65f29c3d4); }
.of-trail.dreadknight { background-image: url(/assets/outfits/dreadknight-trail.png?v=effef1f1d0); }
.of-fig.sandstrider { background-image: url(/assets/outfits/sandstrider.png?v=76c8b33a52); }
.of-spell.sandstrider { background-image: url(/assets/outfits/sandstrider-spell.png?v=f64e52d371); }
.of-tomb.sandstrider { background-image: url(/assets/outfits/sandstrider-tomb.png?v=b42cb08f77); }
.of-trail.sandstrider { background-image: url(/assets/outfits/sandstrider-trail.png?v=7dc2a6d8e5); }
.of-fig.tidehunter { background-image: url(/assets/outfits/tidehunter.png?v=d26346050d); }
.of-spell.tidehunter { background-image: url(/assets/outfits/tidehunter-spell.png?v=bfb90b6f01); }
.of-tomb.tidehunter { background-image: url(/assets/outfits/tidehunter-tomb.png?v=ba10c5472a); }
.of-trail.tidehunter { background-image: url(/assets/outfits/tidehunter-trail.png?v=b685a3d935); }
.of-fig.petalwind { background-image: url(/assets/outfits/petalwind.png?v=a6660c97e2); }
.of-spell.petalwind { background-image: url(/assets/outfits/petalwind-spell.png?v=ac38137f90); }
.of-tomb.petalwind { background-image: url(/assets/outfits/petalwind-tomb.png?v=2191020385); }
.of-trail.petalwind { background-image: url(/assets/outfits/petalwind-trail.png?v=7190783f48); }
.of-fig.stargazer { background-image: url(/assets/outfits/stargazer.png?v=8d75bc0ae9); }
.of-spell.stargazer { background-image: url(/assets/outfits/stargazer-spell.png?v=7531231b67); }
.of-tomb.stargazer { background-image: url(/assets/outfits/stargazer-tomb.png?v=eae377a48a); }
.of-trail.stargazer { background-image: url(/assets/outfits/stargazer-trail.png?v=223f3c4b23); }
.of-fig.blightcaller { background-image: url(/assets/outfits/blightcaller.png?v=8770498b9b); }
.of-spell.blightcaller { background-image: url(/assets/outfits/blightcaller-spell.png?v=098bcc20ca); }
.of-tomb.blightcaller { background-image: url(/assets/outfits/blightcaller-tomb.png?v=6ec143dbfe); }
.of-trail.blightcaller { background-image: url(/assets/outfits/blightcaller-trail.png?v=39b7b7cc68); }
.of-fig.sunweaver { background-image: url(/assets/outfits/sunweaver.png?v=ed30493c09); }
.of-spell.sunweaver { background-image: url(/assets/outfits/sunweaver-spell.png?v=d8e229bbdb); }
.of-tomb.sunweaver { background-image: url(/assets/outfits/sunweaver-tomb.png?v=0eed57d0de); }
.of-trail.sunweaver { background-image: url(/assets/outfits/sunweaver-trail.png?v=b3f00ce4a6); }
/* */
/* written by tools/quests_build.py --site: the story page */
.story-lore .wrap { display: grid; gap: 22px; max-width: 900px; padding-top: 12px; }
.lore h2 { font-size: 26px; color: var(--gold-hi); margin: 0 0 8px; }
.lore p { color: #d6d2c8; font-size: 17px; line-height: 1.65; margin: 0; }
.story-note { color: var(--muted); max-width: 860px; }
.chapter { margin-top: 40px; }
.chapter h3 { font: 700 26px var(--pixel); margin: 0 0 4px; } .chapter h3 span { color: var(--gold); margin-right: 8px; }
.chapter-blurb { color: var(--muted); margin: 0 0 16px; }
.quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.quest { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; border-left: 4px solid #5a6276; }
.quest.main { border-left-color: var(--gold); } .quest.seal { border-left-color: #e0574f; } .quest.access { border-left-color: #5fd068; }
.quest-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.quest h4 { margin: 0; font: 700 18px var(--pixel); color: var(--text); }
.quest-kind { font: 600 12px var(--pixel); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.quest-meta { color: var(--gold); font-size: 13px; margin: 4px 0 6px; } .quest p { margin: 0 0 6px; color: #d6d2c8; font-size: 15px; }
.quest-perk { color: #8fe0a0 !important; font-size: 14px !important; }
.story-marks p { color: #d6d2c8; max-width: 860px; }
.marks-table { width: 100%; max-width: 860px; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.marks-table th, .marks-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.marks-table th { color: var(--gold); font: 600 13px var(--pixel); text-transform: uppercase; } .marks-table td:nth-child(3), .marks-table td:nth-child(4) { text-align: right; }
@media (max-width: 720px) { .quest-grid { grid-template-columns: 1fr; } .marks-table td:nth-child(4), .marks-table th:nth-child(4) { display: none; } }
/* */
/* the pages of their own (ticket #68): The game, Classes, World, How to play - the Supporter page's hero, lower */
.page-hero { padding: 64px 0 36px; }
.page-hero .lead { max-width: 820px; margin: 0; }
.explore article { display: flex; flex-direction: column; gap: 8px; }
.explore h3 { margin: 0; }
.explore h3 a { color: var(--gold-hi); text-decoration: none; }
.explore h3 a:hover { color: #fff; text-decoration: none; }
.explore .go { margin-top: auto; padding-top: 8px; color: var(--gold); font-weight: 600; text-decoration: none; }
.explore .go:hover { color: var(--gold-hi); text-decoration: none; }
@media (max-width: 720px) { .page-hero { padding: 40px 0 24px; } }
/* - written by tools/patch_notes.py */
.pn-hero { padding: 64px 0 28px; text-align: center; background: radial-gradient(70% 90% at 50% 0%, #1a2238, var(--bg) 70%); }
.pn-hero h1 { font-size: clamp(36px, 5vw, 56px); }
.pn-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 10px 0 0; padding: 0; list-style: none;
color: var(--muted); font-size: 15px; }
.pn-keys b { font-family: var(--pixel); letter-spacing: .06em; }
.pn-list { padding: 24px 0 80px; }
.pn { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 14px; }
.pn-open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; width: 100%; padding: 18px 22px; background: none;
border: 0; border-radius: 12px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pn-open:hover, .pn-open:focus-visible { background: #1d2436; outline: 1px solid var(--gold); }
.pn-ver { font: 700 24px var(--pixel); color: var(--gold-hi); }
.pn-date { color: var(--muted); font-size: 15px; }
.pn-title { flex-basis: 100%; margin: 0; font-weight: 600; color: var(--text); }
.pn-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 600 14px var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
.pn-read { margin-left: auto; font: 700 15px var(--pixel); color: var(--gold-hi); letter-spacing: .06em; }
.pn-body { padding: 0 22px 18px; }
.pn-js .pn .pn-body { display: none; }
.pn-body h3 { font-size: 17px; letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 6px; }
.pn-body ul { margin: 0 0 6px; padding-left: 22px; }
.pn-body li { margin: 4px 0; color: #d8d4ca; }
.pn-new { color: var(--green); }
.pn-bal { color: #f5c86e; }
.pn-fix { color: #8cc8ff; }
.pn-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 48px); padding: 0; background: var(--panel); color: var(--text);
border: 1px solid var(--gold); border-radius: 14px; }
.pn-dialog::backdrop { background: rgba(4, 6, 10, .78); }
.pn-dialog[open] { display: flex; flex-direction: column; }
.pn-d-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.pn-d-head .pn-ver { font-size: 28px; }
.pn-d-head .pn-title { font-size: 19px; }
.pn-d-close { margin-left: auto; }
.pn-d-text { overflow-y: auto; padding: 4px 0 8px; }
.pn-d-text .pn-body { display: block; padding-top: 4px; }
.pn-d-nav { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px 16px; border-top: 1px solid var(--line); }
.pn-btn { padding: 8px 16px; background: #222a3c; color: var(--text); border: 1px solid var(--line); border-radius: 8px;
font: 700 15px var(--pixel); letter-spacing: .06em; cursor: pointer; }
.pn-btn:hover, .pn-btn:focus-visible { border-color: var(--gold); color: var(--gold-hi); }
.pn-btn[hidden] { display: none; }
.pn-d-older { margin-left: auto; }
@media (max-width: 720px) { .pn-open, .pn-d-head, .pn-d-nav { padding-left: 16px; padding-right: 16px; } .pn-body { padding-left: 16px; padding-right: 16px; } .pn-ver { font-size: 21px; } }
/* */