/* the look every page outside the game shares (with site.js for the header): the game's colours and font, thin lines on near-black.
   Boxes with a muted header line, buttons, fields with a > prompt, tabs, notes. Each page adds only its own layout */
:root{--bg:#0b0e12;--panel:#11161d;--panel2:#1a212c;--line:#263040;--txt:#d7dde6;--mut:#8b95a5;--green:#4ade80;--red:#f87171;--yellow:#fbbf24;--blue:#60a5fa;--purple:#c084fc;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.5 var(--mono)}a{color:var(--blue);text-decoration:none}a:hover{color:#93c5fd}
input,select,button,textarea{font-family:inherit}.mut{color:var(--mut)}.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
header.site{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 64px;border-bottom:1px solid var(--line)}
header.site .sl{display:flex;align-items:baseline;gap:16px}header.site .logo{font-weight:800;font-size:20px;color:var(--green)}header.site .sl span{color:var(--mut)}
header.site .sr{display:flex;gap:24px;align-items:center;flex-wrap:wrap}header.site .sr a.on{color:var(--txt)}header.site .me{padding:4px 10px;border:1px solid var(--line);border-radius:6px;color:var(--txt)}header.site .me i{font-style:normal;color:var(--yellow)}header.site .me.adm{border-color:var(--red)}
h1{margin:0;font-size:28px;font-weight:800;line-height:1.2}
.box{border:1px solid var(--line);border-radius:6px;background:var(--panel)}.bh{display:flex;justify-content:space-between;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);color:var(--mut)}.bb{padding:14px;display:flex;flex-direction:column;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border:1px solid transparent;border-radius:6px;background:var(--green);color:var(--bg);font:800 13px var(--mono);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:not(:disabled):hover{filter:brightness(1.15);color:var(--bg)}.btn.grey{background:none;color:var(--txt);border-color:var(--line);font-weight:600}.btn.grey:hover{filter:none;border-color:var(--mut);color:var(--txt)}.btn.red{background:var(--red)}.btn:disabled{opacity:.4;cursor:default}
.lab{display:flex;flex-direction:column;gap:4px;color:var(--mut);font-size:12px}.in{display:flex;align-items:center;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);box-sizing:border-box}.in:focus-within{border-color:var(--green)}
.in::before{content:'>';color:var(--green);margin-right:8px}.in input{flex:1;min-width:0;height:100%;border:0;padding:0;background:none;color:var(--txt);font:14px var(--mono);outline:none}.in input::placeholder{color:var(--mut)}.in input:disabled{opacity:.6}
.tabs{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}.tabs button{padding:8px 16px;border:0;border-right:1px solid var(--line);background:none;color:var(--mut);font:14px var(--mono);cursor:pointer}.tabs button:last-child{border-right:0}.tabs button.on{background:var(--panel2);color:var(--txt)}
.note{padding:12px 16px;border:1px solid var(--blue);border-radius:6px;color:var(--blue)}.note::before{content:'i  ';white-space:pre}
.out{font-size:13px}.out.bad{color:var(--red)}.out.good{color:var(--green)}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}.bar>div{height:100%;width:0;background:var(--yellow);border-radius:4px}
input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;cursor:pointer;font:inherit;color:var(--txt)}input[type=checkbox]::after{content:'[ ]'}input[type=checkbox]:checked::after{content:'[x]'}
@media (max-width:700px){header.site{padding:16px}}