/* WaveFern Wiki (v47.7.0). Laid out like a plain encyclopedia: a link sidebar, article tabs, a title with a rule,
   an infobox on the right, a contents box and bordered tables. Colours, fonts and the black borders come from the
   game (docs/THEMES.md). One accent colour, no icons, no motion except the game's own button press. */
:root{--bg:#0c0f0d;--p:#111613;--t:#e8f3ec;--m:#8aa094;--g:#2fe68a;--g2:#1fa864;--line:#2a352e;--btn:#26302a;--btnh:#364439}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--t);font:15px/1.65 ui-monospace,Menlo,Consolas,monospace}
h1,h2,h3,.px{font-family:'Silkscreen',ui-monospace,monospace;font-weight:400;line-height:1.25}
a{color:var(--g);text-decoration:none}a:hover{text-decoration:underline}
a.seen{color:var(--g2)}
a.new{color:#e06c6c}
code,kbd{font:inherit;font-size:.92em;background:#000;border:1px solid var(--line);padding:0 4px}
kbd{border:2px solid #000;background:var(--btn);box-shadow:inset 0 -2px #0007;padding:0 5px;white-space:nowrap}
.m{color:var(--m)}
::selection{background:var(--g);color:#04120a}

/* top bar */
#top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:10px 18px;background:#070a08;border-bottom:3px solid #000}
#logo{display:flex;flex-direction:column;color:var(--g);font-size:19px;line-height:1;white-space:nowrap}
#logo:hover{text-decoration:none}
#logo small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--m);margin-top:4px}
#srch{flex:1;position:relative;max-width:480px;margin-left:auto}
#q{width:100%;font:inherit;font-size:14px;background:#000;color:var(--t);border:2px solid var(--line);padding:6px 10px;outline:0}
#q:focus{border-color:var(--g)}
#srch:before{content:none}
#sug{position:absolute;left:0;right:0;top:calc(100% + 2px);background:#0b0f0d;border:2px solid var(--line);display:none;max-height:60vh;overflow:auto}
#sug.on{display:block}
#sug a{display:block;padding:6px 10px;color:var(--t)}#sug a small{display:block;color:var(--m)}
#sug a.on,#sug a:hover{background:var(--btn);text-decoration:none}
#menu{display:none}

/* the game's button */
.btn,button{font:inherit;font-size:14px;color:var(--t);background:var(--btn);border:2px solid #000;padding:5px 12px;cursor:pointer;box-shadow:inset 0 -3px #0007}
.btn:hover,button:hover{background:var(--btnh);text-decoration:none}
.btn:active,button:active{box-shadow:inset 0 -1px #0007;transform:translateY(1px)}
.btn.go{background:var(--g);color:#04120a;font-weight:700}.btn.go:hover{background:#5df2a6}

/* layout */
#wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;max-width:1200px;margin:0 auto;padding:20px 18px 40px}
#side{position:sticky;top:70px;align-self:start;max-height:calc(100vh - 86px);overflow:auto;font-size:13.5px}
#side h3{font-size:11px;color:var(--m);margin:16px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--line);letter-spacing:.5px}
#side h3:first-child{margin-top:0}
#side h3 a{color:var(--m)}
#side a{display:block;color:var(--g);padding:1px 0;line-height:1.45}
#side a.seen{color:var(--g2)}
#side a.on{color:var(--t);font-weight:700}
.panel{background:var(--p);border:3px solid #000;box-shadow:4px 4px 0 #0008}
#side .panel{background:none;border:0;box-shadow:none}
#main{min-width:0}
article.panel{padding:16px 28px 28px;min-width:0}

/* article */
.tabs{display:flex;gap:2px;margin:0 0 12px;border-bottom:2px solid var(--line)}
.tabs a{padding:4px 12px;color:var(--m);font-size:13px;border:2px solid transparent;border-bottom:0;margin-bottom:-2px}
.tabs a:hover{color:var(--t);text-decoration:none}
.tabs a.on{color:var(--t);background:var(--p);border-color:var(--line);border-bottom:2px solid var(--p)}
article h1{font-size:clamp(22px,3.6vw,30px);color:var(--t);margin:6px 0 0;padding-bottom:6px;border-bottom:2px solid var(--line)}
.from{font-size:12.5px;color:var(--m);margin:4px 0 14px}
article h2{font-size:17px;color:var(--t);margin:28px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--line)}
article h3{font-size:13.5px;color:var(--t);margin:18px 0 4px}
article p{margin:8px 0}
article ul,article ol{padding-left:24px;margin:8px 0}article li{margin:3px 0}
.lead{font-size:inherit}
sup.ref{font-size:10px;margin-left:1px}

/* infobox */
.ib{float:right;clear:right;width:280px;margin:2px 0 14px 22px;background:#0a0d0b;border:2px solid var(--line);font-size:13px}
.ib .ibt{font-family:'Silkscreen',ui-monospace,monospace;text-align:center;padding:6px;background:#1a221d;color:var(--t);font-size:14px}
.ib table{width:100%;border-collapse:collapse}
.ib th,.ib td{padding:4px 8px;border-top:1px solid var(--line);vertical-align:top;text-align:left}
.ib th{color:var(--m);font-weight:400;width:44%}
.ib .ibh td{background:#141a16;text-align:center;font-weight:700}

/* contents */
.toc{display:inline-block;min-width:220px;max-width:100%;margin:12px 0 4px;padding:8px 16px 10px 12px;background:#0a0d0b;border:2px solid var(--line);font-size:13.5px}
.toch{display:flex;gap:8px;align-items:baseline;justify-content:center;margin-bottom:4px}
.toch b{font-weight:700}
.toc .tg{font-size:11.5px;padding:0;background:none;border:0;box-shadow:none;color:var(--g)}
.toc .tg:before{content:'['}.toc .tg:after{content:']'}
.toc .tg:hover{background:none;text-decoration:underline}.toc .tg:active{transform:none}
.toc ol{margin:0;padding-left:22px}.toc li{margin:1px 0}
.toc.shut ol{display:none}.toc.shut .toch{margin:0}

/* tables */
.tw{overflow-x:auto;margin:10px 0 14px;max-width:100%}
.tw.tall{max-height:520px;overflow:auto;border-bottom:2px solid var(--line)}
table.t{border-collapse:collapse;font-size:13.5px;background:#0a0d0b;border:2px solid var(--line)}
table.t th,table.t td{border:1px solid var(--line);padding:4px 9px;vertical-align:top}
table.t th{position:sticky;top:0;background:#1a221d;font-weight:700;text-align:left;white-space:nowrap;cursor:pointer;user-select:none}
table.t th:after{content:' ↕';color:var(--m);font-weight:400;font-size:11px}
table.t th.asc:after{content:' ↑'}table.t th.desc:after{content:' ↓'}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums}
.tf{margin:10px 0 -4px;display:flex;gap:8px;align-items:center}
.tf input{font:inherit;font-size:13px;background:#000;color:var(--t);border:2px solid var(--line);padding:3px 8px;width:220px;outline:0}
.tf input:focus{border-color:var(--g)}

/* formulas, notes, small labels */
.fx{background:#000;border:2px solid var(--line);padding:8px 12px;margin:10px 0 14px;overflow-x:auto;white-space:pre;font-size:13.5px}
.fx b{color:var(--g);font-weight:400}
.note{background:#0a0d0b;border:2px solid var(--line);padding:6px 12px;margin:10px 0;font-size:14px}
.note>b:first-child{margin-right:6px}
.note.warn{border-color:#5a2a2a}
.tag{display:inline-block;font-size:12px;padding:0 5px;border:1px solid var(--line);background:#141a16;margin:1px 2px 1px 0;white-space:nowrap}
.tag.g{border-color:var(--g2);color:var(--g)}.tag.y{color:#e8c25a}.tag.r{color:#e06c6c}
.bars{display:flex;align-items:flex-end;gap:2px;height:110px;border:2px solid var(--line);background:#000;padding:6px;margin:10px 0}
.bars i{flex:1;background:var(--g2)}
details{margin:8px 0}summary{cursor:pointer;color:var(--g)}
summary.btn{display:inline-block;color:var(--t)}
.cats{clear:both;margin-top:26px;padding:6px 10px;border:2px solid var(--line);background:#0a0d0b;font-size:13px}
ol.refs{font-size:13px}ol.hist{font-size:13.5px}ol.hist li{margin:6px 0}
ul.catl{columns:2 220px;column-gap:28px}

/* search results */
.res{margin:14px 0}.res a{font-weight:700}.res p{margin:2px 0 0;font-size:13.5px;color:var(--m)}
mark{background:#2fe68a33;color:inherit}

/* main page */
.welcome{text-align:center;padding:6px 0 14px;border-bottom:2px solid var(--line);margin-bottom:18px}
.welcome p{margin:2px 0}.w1{font-family:'Silkscreen',ui-monospace,monospace;font-size:24px;color:var(--g)}
.home h1,.home .from{display:none}
.mp{display:grid;grid-template-columns:3fr 2fr;gap:18px}
.mpb{border:2px solid var(--line);background:#0a0d0b;margin-bottom:18px}
.mpb h2{margin:0;padding:5px 10px;font-size:14px;background:#1a221d;border:0}
.mpb>p,.mpb>ul{margin:8px 12px}.mpb ul{padding-left:20px}
.mpb .more{text-align:right;font-size:13px}

/* page preview */
#pv{position:fixed;z-index:30;display:none;background:#0b0f0d;border:2px solid var(--line);box-shadow:4px 4px 0 #0008;padding:8px 12px;font-size:13px}
#pv.on{display:block}#pv b{font-family:'Silkscreen',ui-monospace,monospace;font-weight:400}#pv p{margin:4px 0}#pv small{color:var(--m)}

footer{text-align:center;color:var(--m);font-size:12.5px;padding:0 16px 30px}

/* scroll bars in the game's look */
@supports not selector(::-webkit-scrollbar){html,#side,.tw,#sug{scrollbar-color:#3a4a40 #050806}}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#050806}
::-webkit-scrollbar-thumb{background:#3a4a40;border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:#4d6355}
::-webkit-scrollbar-corner{background:#000}

@media(max-width:860px){
 #wrap{grid-template-columns:1fr;padding:12px 10px 30px}
 #menu{display:inline-block;padding:4px 10px}
 #side{position:fixed;left:0;top:0;bottom:0;width:min(270px,84vw);max-height:none;z-index:20;background:#070a08;border-right:3px solid #000;padding:14px;transform:translateX(-105%)}
 #side.on{transform:none}
 #top{flex-wrap:wrap;gap:8px;padding:8px 10px}
 #logo{font-size:15px}#logo small{display:none}
 #srch{order:3;flex-basis:100%;max-width:none}
 article.panel{padding:12px 14px 20px}
 .ib{float:none;width:auto;margin:0 0 14px}
 .mp{grid-template-columns:1fr}
}
/* contact form */
.cform{max-width:520px;margin-top:12px}
.cform label{display:block;margin:0 0 12px;font-size:13px}
.cform input,.cform textarea{display:block;width:100%;margin-top:4px;font:inherit;font-size:13px;background:#000;color:var(--t);border:2px solid var(--line);padding:6px 8px;outline:0;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--g)}
.cform .hp{position:absolute;left:-9999px}
/* soundtrack player bar, fixed to the bottom like a music app's now-playing bar */
body.hasbar{padding-bottom:84px}
#pbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr minmax(0,2fr) 1fr;align-items:center;gap:12px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:#070908;border-top:2px solid var(--line);font-size:13px}
#pbar .pnow{min-width:0;line-height:1.3}
#pbar .pnow b{display:block;font-family:'Silkscreen',ui-monospace,monospace;font-weight:400;color:var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pbar .pbtns{display:flex;justify-content:center;gap:6px}
#pbar button{padding:3px 8px;font-size:12px;min-width:34px;height:28px;display:inline-flex;align-items:center;justify-content:center}
#pbar button svg{width:12px;height:12px;fill:currentColor}
#pbar #pplay{min-width:42px}
#pbar .go{background:var(--g2);color:#000}
#pbar .go:hover{background:var(--g)}
#pbar .pseek{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--m);font-size:12px}
#pbar .pseek span{min-width:34px;text-align:center}
#pbar input[type=range]{flex:1;min-width:0;accent-color:var(--g);height:14px;cursor:pointer}
#pbar .pvol{display:flex;align-items:center;gap:8px;justify-content:flex-end}
#pbar .pvol input{flex:0 0 110px;width:110px}
.ost tr.on td{background:var(--btn);color:var(--g)}
.ost td:first-child,.ost td:nth-child(3){width:1%;white-space:nowrap}
@media (max-width:700px){#pbar{grid-template-columns:1fr auto;gap:6px 10px}#pbar .pmid{grid-column:1/-1;grid-row:2}#pbar .pvol label,#pbar .pvol input{display:none}body.hasbar{padding-bottom:110px}}
/* screenshots: a thumbnail beside the lead, a gallery for the rest, and a full-size view on click */
figure{margin:0}
figure img{display:block;width:100%;height:auto;image-rendering:pixelated;background:#000}
figure figcaption{font-size:12px;color:var(--m);line-height:1.45;padding:6px 2px 0}
figure.thumb{float:right;clear:right;width:320px;margin:4px 0 14px 18px;padding:4px;border:1px solid var(--line);background:#0b0f0d}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0 16px}
.gallery figure{padding:4px;border:1px solid var(--line);background:#0b0f0d}
#lb{position:fixed;inset:0;z-index:60;background:#000d;display:none;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
#lb.on{display:flex}
#lb figure{max-width:min(1280px,100%)}
#lb img{max-height:85vh;width:auto;max-width:100%;margin:0 auto;border:2px solid var(--line)}
#lb figcaption{text-align:center;color:var(--t);font-size:13px}
@media(max-width:860px){figure.thumb{float:none;width:auto;margin:0 0 14px}}