/* Lune - the page is an old ORPG client: login, server select, the world, the quest log.
   Palette from the Lune moon icons. Pixel font for game UI, system font for reading. */

@font-face {
  font-family: "Pixelify";
  src: url("/fonts/PixelifySans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --night: #0b0a18;
  --panel: #1a1733;
  --panel-2: #231f44;
  --ink: #fff6e5;
  --soft: #cdc6e6;
  --dim: #8f88b3;
  --outline: #050410;
  --hi: rgba(255, 255, 255, 0.18);
  --lo: rgba(0, 0, 0, 0.55);
  --blue: #2e4bc4;
  --pink: #d74b75;
  --gold: #c4b02e;
  --gold-hi: #f2c53d; /* brighter gold for the button and headline text */
  --sky: #4ba7d7;
  --hot: #e50d5e;
  --lime: #4aeb35;
  --red: #c41313;
  --bad: #ff9aa6;
  --pixel: "Pixelify", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--night); }

body {
  margin: 0;
  color: var(--ink);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1px 1px at 8% 3%, #fff 99%, transparent),
    radial-gradient(1px 1px at 92% 6%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 3% 18%, #fff 99%, transparent),
    radial-gradient(1px 1px at 97% 27%, #fff 99%, transparent),
    radial-gradient(1px 1px at 2% 45%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 98% 58%, #fff 99%, transparent),
    radial-gradient(1px 1px at 3% 77%, #fff 99%, transparent),
    radial-gradient(1px 1px at 96% 90%, #fff 99%, transparent),
    var(--night);
}

a { color: var(--sky); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 0.9rem; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; }
.logo { display: flex; align-items: center; gap: 0.5rem; font: 700 1.6rem/1 var(--pixel); color: var(--ink); text-decoration: none; }
.logo img { width: 2.1rem; height: 2.1rem; }
.status { font: 500 0.85rem/1 var(--pixel); color: var(--lime); }
.status::before { content: "\25CF  "; }

/* Game-style buttons: bevelled, chunky */
.btn {
  display: inline-block;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border: 3px solid var(--outline);
  background: var(--gold-hi);
  color: var(--outline);
  font: 700 1.05rem/1.2 var(--pixel);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.55), inset -3px -3px 0 rgba(0, 0, 0, 0.35), 0 4px 0 var(--outline);
  cursor: pointer;
}
.btn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 0 var(--outline); }
.btn.alt { background: var(--panel-2); color: var(--ink); }
.btn.tiny { min-height: 34px; padding: 0.3rem 0.7rem; font-size: 0.9rem; }

/* Windows */
.win {
  margin: 1.4rem 0;
  border: 3px solid var(--outline);
  background: var(--panel);
  box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 0 8px 0 var(--outline);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 3px solid var(--outline);
  font: 700 0.95rem/1 var(--pixel);
  letter-spacing: 0.06em;
  color: var(--outline);
}
.win-bar img { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.win-bar .title { flex: 1; }
.win-bar .ctl { display: flex; gap: 0.3rem; }
.win-bar .ctl span {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--outline);
  background: var(--ink);
  font: 700 0.75rem/0.95rem var(--pixel);
  text-align: center;
}
.auth .win-bar { background: linear-gradient(90deg, var(--gold), var(--sky)); }
.room .win-bar { background: linear-gradient(90deg, var(--blue), var(--pink)); }
.world .win-bar { background: linear-gradient(90deg, var(--hot), var(--lime)); }
.quest .win-bar { background: linear-gradient(90deg, var(--red), #000); color: var(--ink); }
.quest .win-bar .ctl span { color: var(--outline); }
.win-body { padding: 1.1rem; }

.pixel { font-family: var(--pixel); }
h1, h2, h3 { font-family: var(--pixel); font-weight: 700; line-height: 1.1; }
h1 { font-size: 2.15rem; margin: 0 0 0.8rem; }
h1 .line2 { color: var(--gold-hi); }
h2 { font-size: 1.6rem; margin: 0 0 0.7rem; }
h3 { font-size: 1.15rem; margin: 1.2rem 0 0.5rem; }
p { margin: 0 0 1rem; }
.soft { color: var(--soft); }
.kicker { font: 600 0.9rem/1.3 var(--pixel); color: var(--sky); margin: 0 0 0.5rem; letter-spacing: 0.04em; }

/* Footage frames (real clips and screenshots go here) */
.footage {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0 0 1.1rem;
  border: 3px solid var(--outline);
  background:
    linear-gradient(rgba(11, 10, 24, 0.55), rgba(11, 10, 24, 0.55)),
    repeating-conic-gradient(#3e6b3a 0% 25%, #4a7d44 0% 50%) 0 0 / 32px 32px;
  display: grid;
  place-items: center;
  text-align: center;
  font: 600 0.95rem/1.3 var(--pixel);
  color: var(--ink);
  padding: 0.75rem;
  box-shadow: inset 0 0 0 2px var(--lo);
}
.footage.editor {
  background:
    linear-gradient(rgba(11, 10, 24, 0.6), rgba(11, 10, 24, 0.6)),
    repeating-linear-gradient(0deg, #2b2650 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, #2b2650 0 1px, transparent 1px 16px),
    #1d1a38;
}

.footage.shot { padding: 0; background: var(--outline); }
.footage.shot img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }

.actions { display: flex; flex-direction: column; gap: 0.7rem; }

/* Server select */
.servers { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-family: var(--pixel); }
.servers th { text-align: left; font-size: 0.8rem; color: var(--dim); font-weight: 500; padding: 0 0.4rem 0.4rem; letter-spacing: 0.05em; }
.servers td { padding: 0.55rem 0.4rem; border-top: 2px solid var(--panel-2); vertical-align: middle; }
.servers tr.mine td { background: rgba(242, 197, 61, 0.1); }
.servers .name { font-weight: 700; }
.servers .tag { display: block; font-size: 0.78rem; color: var(--dim); font-weight: 400; }
.servers .pop { white-space: nowrap; color: var(--lime); }
.servers .pop.zz { color: var(--dim); }
.servers td:last-child { text-align: right; }

/* Patch notes */
.notes { list-style: none; margin: 0 0 1rem; padding: 0; font-family: var(--pixel); }
.notes li { padding: 0.3rem 0 0.3rem 1.6rem; position: relative; }
.notes li::before { position: absolute; left: 0; font-weight: 700; }
.notes .rm { color: var(--soft); }
.notes .rm::before { content: "-"; color: var(--red); }
.notes .add::before { content: "+"; color: var(--lime); }

/* Chat */
.chat {
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--outline);
  padding: 0.75rem 0.8rem;
  margin: 0 0 1.1rem;
  font: 400 1rem/1.5 var(--pixel);
}
.chat p { margin: 0 0 0.35rem; }
.chat .who { font-weight: 700; margin-right: 0.35rem; }
.chat .sys .who { color: var(--gold-hi); }
.chat .sys { color: var(--gold-hi); }
.chat .dev .who { color: var(--lime); }
.chat .guest .who { color: var(--sky); }
.chat .join { margin-top: 0.7rem; }
.chat .join a { color: var(--ink); background: var(--hot); padding: 0.05rem 0.4rem; text-decoration: none; white-space: nowrap; }
.chat .join a:hover { background: var(--lime); color: var(--outline); }

/* Inventory */
.inv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0 0 0.8rem; padding: 0; list-style: none; }
.inv li {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  background: var(--panel-2);
  border: 2px solid var(--outline);
  box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo);
  font: 600 0.72rem/1.1 var(--pixel);
  text-align: center;
  padding: 0.2rem;
}
.inv li::before {
  content: "";
  width: 2rem;
  height: 2rem;
  background: url("/img/systems.png") 0 0 / 46rem 2rem no-repeat;
  image-rendering: pixelated;
}
.inv .i0::before { background-position-x: -0rem; }
.inv .i1::before { background-position-x: -2rem; }
.inv .i2::before { background-position-x: -4rem; }
.inv .i3::before { background-position-x: -6rem; }
.inv .i4::before { background-position-x: -8rem; }
.inv .i5::before { background-position-x: -10rem; }
.inv .i6::before { background-position-x: -12rem; }
.inv .i7::before { background-position-x: -14rem; }
.inv .i8::before { background-position-x: -16rem; }
.inv .i9::before { background-position-x: -18rem; }
.inv .i10::before { background-position-x: -20rem; }
.inv .i11::before { background-position-x: -22rem; }
.inv .i12::before { background-position-x: -24rem; }
.inv .i13::before { background-position-x: -26rem; }
.inv .i14::before { background-position-x: -28rem; }
.inv .i15::before { background-position-x: -30rem; }
.inv .i16::before { background-position-x: -32rem; }
.inv .i17::before { background-position-x: -34rem; }
.inv .i18::before { background-position-x: -36rem; }
.inv .i19::before { background-position-x: -38rem; }
.inv .i20::before { background-position-x: -40rem; }
.inv .i21::before { background-position-x: -42rem; }
.inv .i22::before { background-position-x: -44rem; }
.inv-note { font: 500 0.9rem/1.4 var(--pixel); color: var(--dim); margin: 0; }

/* Quest log */
.quest-name { font: 700 1.5rem/1.15 var(--pixel); color: var(--gold-hi); margin: 0 0 0.3rem; }
.req { font: 500 0.9rem/1.3 var(--pixel); color: var(--dim); margin: 0 0 1rem; }
.qlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.qlist li { padding: 0.25rem 0 0.25rem 1.7rem; position: relative; }
.qlist.obj li::before { content: ""; position: absolute; left: 0.1rem; top: 0.55rem; width: 0.9rem; height: 0.9rem; border: 2px solid var(--soft); }
.qlist.rew li::before { content: "\2726"; position: absolute; left: 0.1rem; color: var(--gold-hi); }

/* Form */
.q { margin: 0 0 1.1rem; }
.q > label:not(.pick), legend { display: block; font: 600 1rem/1.3 var(--pixel); margin-bottom: 0.35rem; }
.opt { font-weight: 400; color: var(--dim); font-size: 0.85rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
input[type="email"], input[type="text"] {
  width: 100%;
  min-height: 50px;
  padding: 0.6rem 0.8rem;
  border: 3px solid var(--outline);
  background: #0f0d22;
  color: var(--ink);
  font: inherit;
  box-shadow: inset 2px 2px 0 var(--lo), inset -2px -2px 0 var(--hi);
}
input[aria-invalid="true"] { border-color: var(--bad); }
.pick { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.pick input { width: 1.35rem; height: 1.35rem; margin: 0; flex-shrink: 0; accent-color: var(--gold-hi); }
.cf-turnstile { min-height: 65px; margin-bottom: 1.1rem; }
#join-form .btn { width: 100%; }
.fine { color: var(--dim); font-size: 0.9rem; margin: 0.9rem 0 0; text-align: center; }
.err { display: block; color: var(--bad); font-weight: 700; margin-top: 0.3rem; }
.err-box { border: 3px solid var(--bad); padding: 0.75rem 1rem; margin-bottom: 1.1rem; }
.err-box h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.err-box ul, .error-list { color: var(--bad); margin: 0; }

.page { max-width: 38rem; margin: 0 auto; padding: 1.25rem 1rem; }
footer { color: var(--dim); font: 500 0.9rem/1.4 var(--pixel); text-align: center; padding: 1.5rem 1rem 2.5rem; }
[hidden] { display: none !important; }

@media (min-width: 46rem) {
  h1 { font-size: 3rem; }
  .actions { flex-direction: row; }
  .inv { grid-template-columns: repeat(5, 1fr); }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Legal pages */
.legal h2 { font: 700 1.15rem/1.25 var(--pixel); margin: 1.6rem 0 0.4rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: 0.3rem; }
.legal code { font-size: 0.9em; color: var(--sky); }

/* Editors window */
.caption { font-size: 0.95rem; margin: -0.4rem 0 1.1rem; }
.tools { margin: 0; display: grid; gap: 0.5rem; }
.tools div { background: var(--panel-2); border: 2px solid var(--outline); box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo); padding: 0.55rem 0.75rem; }
.tools dt { font: 700 1rem/1.25 var(--pixel); color: var(--gold-hi); }
.tools dd { margin: 0.15rem 0 0; color: var(--soft); font-size: 0.95rem; }
@media (min-width: 46rem) { .tools { grid-template-columns: 1fr 1fr; } }
.inv-label { font: 600 0.9rem/1.3 var(--pixel); color: var(--sky); margin: 1rem 0 0.5rem; letter-spacing: 0.04em; }
@media (min-width: 46rem) { .inv { grid-template-columns: repeat(6, 1fr); } .inv li { font-size: 0.8rem; } }

/* Stats strip */
.stats-win .win-body { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.stats li { background: var(--panel-2); border: 2px solid var(--outline); box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo); padding: 0.5rem 0.6rem; text-align: center; }
.stats .val { display: block; font: 700 1.6rem/1.1 var(--pixel); color: var(--gold-hi); }
.stats .lbl { display: block; font: 500 0.8rem/1.2 var(--pixel); color: var(--soft); }
@media (min-width: 46rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* Compare table */
.cmp-scroll { overflow-x: auto; margin: 0 0 0.6rem; }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cmp th, .cmp td { padding: 0.5rem 0.4rem; border-bottom: 2px solid var(--outline); text-align: center; vertical-align: middle; }
.cmp thead th { font: 700 0.85rem/1.2 var(--pixel); color: var(--dim); }
.cmp thead th.us { color: var(--gold-hi); }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--ink); min-width: 8.5rem; }
.cmp .yes { color: var(--lime); font-weight: 700; }
.cmp .no { color: var(--dim); }
.cmp td:nth-child(2) { background: rgba(242, 197, 61, 0.08); }
.fine.left { text-align: left; margin-top: 0.3rem; }
@media (max-width: 37.5rem) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody { display: block; }
  .cmp tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; padding: 0.6rem 0; border-bottom: 2px solid var(--outline); }
  .cmp tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 0.2rem; min-width: 0; }
  .cmp td { border: 0; padding: 0.35rem 0.2rem; background: var(--panel-2); font-size: 0.85rem; }
  .cmp td::before { content: attr(data-label); display: block; font: 600 0.72rem/1.2 var(--pixel); color: var(--dim); margin-bottom: 0.15rem; }
  .cmp td:nth-child(2) { background: rgba(242, 197, 61, 0.12); }
  .cmp td:nth-child(2)::before { color: var(--gold-hi); }
}