/* 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); }

/* Inventory */
.inv { display: grid; grid-template-columns: repeat(3, 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.82rem/1.1 var(--pixel);
  text-align: center;
  padding: 0.25rem;
}
.inv li::before {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  background: url("/img/systems.png") 0 0 / 37.5rem 2.5rem no-repeat;
  image-rendering: pixelated;
}
.inv li:nth-child(1)::before { background-position-x: -0rem; }
.inv li:nth-child(2)::before { background-position-x: -2.5rem; }
.inv li:nth-child(3)::before { background-position-x: -5rem; }
.inv li:nth-child(4)::before { background-position-x: -7.5rem; }
.inv li:nth-child(5)::before { background-position-x: -10rem; }
.inv li:nth-child(6)::before { background-position-x: -12.5rem; }
.inv li:nth-child(7)::before { background-position-x: -15rem; }
.inv li:nth-child(8)::before { background-position-x: -17.5rem; }
.inv li:nth-child(9)::before { background-position-x: -20rem; }
.inv li:nth-child(10)::before { background-position-x: -22.5rem; }
.inv li:nth-child(11)::before { background-position-x: -25rem; }
.inv li:nth-child(12)::before { background-position-x: -27.5rem; }
.inv li:nth-child(13)::before { background-position-x: -30rem; }
.inv li:nth-child(14)::before { background-position-x: -32.5rem; }
.inv li:nth-child(15)::before { background-position-x: -35rem; }
.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); }