/* Aethermere website. Colours are picked from the game's own art: dark timber, parchment, grass, sea, ember, wisp. */
:root {
  --night: #1b1611;
  --wood: #3e2a1a;
  --wood-hi: #6b4528;
  --trim: #c9a467;
  --parchment: #f0e3c4;
  --parchment-2: #e4d1a6;
  --ink: #2b1f14;
  --ink-soft: #5a4632;
  --grass: #5f9e35;
  --sea: #2a7fa0;
  --ember: #d9682f;
  --wisp: #7fd8f2;
  --button: #dba765;
  --button-low: #a8743a;
  --slot: #3b4a46;
  --slot-edge: #26302d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font: 19px/1.6 "Alegreya", Georgia, serif;
}
img { max-width: 100%; display: block; }
a { color: var(--sea); }
a:hover { color: var(--ember); }

h1, h2, h3, .display {
  font-family: "Sour Gummy", "Trebuchet MS", sans-serif;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.15;
}
h2 { font-size: 34px; margin: 0 0 18px; color: var(--wood); }
h3 { font-size: 22px; margin: 0 0 6px; color: var(--wood); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  background: var(--night);
  border-bottom: 3px solid var(--wood-hi);
  position: sticky; top: 0; z-index: 10;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--parchment); text-decoration: none; font-size: 22px; }
.brand img { width: 28px; height: 28px; image-rendering: pixelated; }
.brand:hover { color: var(--wisp); }
.nav { display: flex; gap: 22px; }
.nav a { color: var(--parchment-2); text-decoration: none; font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-size: 17px; }
.nav a:hover, .nav a.here { color: var(--wisp); }

/* ── Buttons, in the game's own style ────────────────────────────────── */
.button {
  display: inline-block;
  background: var(--button);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: inset 0 -5px 0 var(--button-low);
  padding: 12px 26px 15px;
  font-family: "Sour Gummy", "Trebuchet MS", sans-serif;
  font-size: 22px;
  text-decoration: none;
}
.button:hover { background: #e9b977; color: var(--ink); }
.button:active { box-shadow: inset 0 3px 0 var(--button-low); padding: 15px 26px 12px; }
.button.small { font-size: 17px; padding: 7px 16px 10px; box-shadow: inset 0 -4px 0 var(--button-low); }

/* ── Hero: the hamlet, with a game-style panel over it ───────────────── */
.hero {
  position: relative;
  min-height: 560px;
  background: var(--night) url("img/hamlet.jpg") center 30% / cover no-repeat;
  image-rendering: pixelated;
  display: flex; align-items: flex-end;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(27,22,17,0) 40%, rgba(27,22,17,.75));
}
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 40px; }
.panel {
  max-width: 560px;
  background: rgba(43, 31, 20, .93);
  color: var(--parchment);
  border: 3px solid var(--trim);
  outline: 3px solid var(--ink);
  padding: 26px 30px 28px;
}
.panel h1 { font-size: 56px; margin: 0 0 8px; color: #f6d79a; text-shadow: 3px 3px 0 var(--ink); }
.panel p { margin: 0 0 20px; }
.panel .note { font-size: 16px; color: var(--parchment-2); margin: 14px 0 0; }
.panel .note a { color: var(--wisp); }

/* ── The beta strip ──────────────────────────────────────────────────── */
.strip { background: var(--wood); color: var(--parchment); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.strip .wrap { padding: 14px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.strip b { color: #f6d79a; font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-weight: 600; }
.strip a { color: var(--wisp); }

section { padding: 64px 0; }
section.alt { background: var(--parchment-2); border-top: 3px solid #cdb685; border-bottom: 3px solid #cdb685; }
.lead { max-width: 720px; margin: 0 0 30px; color: var(--ink-soft); }

/* ── Places: screenshot beside a few lines, alternating ──────────────── */
.place { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center; margin: 0 0 46px; }
.place:nth-child(even) { grid-template-columns: 1fr 1.35fr; }
.place:nth-child(even) figure { order: 2; }
.place figure { margin: 0; border: 3px solid var(--ink); outline: 3px solid var(--trim); background: var(--ink); }
.place p { margin: 0; }

/* ── Things to do: icons in inventory slots ──────────────────────────── */
.skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 34px; }
.skill { display: flex; gap: 16px; align-items: flex-start; }
.slot {
  flex: none; width: 72px; height: 72px;
  background: var(--slot);
  border: 3px solid var(--slot-edge);
  box-shadow: inset 0 0 0 2px #4d605b;
  display: grid; place-items: center;
}
.slot img { width: 64px; height: 64px; image-rendering: pixelated; }   /* exactly 2x the 32 px icons */
.skill p { margin: 0; }
.skill b { font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-weight: 600; font-size: 19px; color: var(--wood); display: block; }

/* ── Updates ─────────────────────────────────────────────────────────── */
.update { background: var(--parchment); border: 3px solid var(--ink); padding: 22px 26px; margin: 0 0 22px; }
.alt .update { background: #f6ecd2; }
.update header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; }
.update .when { font-family: "Sour Gummy", "Trebuchet MS", sans-serif; color: var(--ink-soft); font-size: 16px; }
.update .ver { background: var(--grass); color: #fff; font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-size: 14px; padding: 1px 8px; margin-right: 8px; }
.update h4 { font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-weight: 600; font-size: 19px; color: var(--wood); margin: 16px 0 2px; }
.update ul { margin: 8px 0 0; padding-left: 22px; }
.update li { margin: 0 0 6px; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
details { border-bottom: 2px dashed #b99e6a; padding: 12px 0; }
summary { cursor: pointer; font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-size: 20px; color: var(--wood); }
details p { margin: 10px 0 4px; }

/* ── Downloads ───────────────────────────────────────────────────────── */
.downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.downloads div p { margin: 6px 0 12px; color: var(--ink-soft); }

footer { background: var(--night); color: var(--parchment-2); padding: 34px 0 44px; font-size: 16px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer a { color: var(--wisp); }

@media (max-width: 800px) {
  body { font-size: 18px; }
  .nav { gap: 14px; }
  .nav a { font-size: 15px; }
  .brand { font-size: 19px; }
  .nav .hide-small { display: none; }
  .hero { min-height: 520px; background-position: 30% 30%; }
  .panel { padding: 20px 20px 22px; }
  .panel h1 { font-size: 42px; }
  .place, .place:nth-child(even) { grid-template-columns: 1fr; gap: 14px; }
  .place:nth-child(even) figure { order: 0; }
  .skills, .downloads { grid-template-columns: 1fr; }
  h2 { font-size: 28px; }
  section { padding: 46px 0; }
}

/* ── Live server status (the beta strip; /api/status.json from the game server) ─ */
.status { font-family: "Alegreya", Georgia, serif; font-size: 18px; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; margin-left: auto; }
.status .dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: #8a7a66; border: 2px solid var(--ink); }
.status.up .dot { background: #7bd34a; }
.status.down .dot { background: var(--ember); }

/* ── Hiscores ────────────────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tabs button {
  font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-size: 15px; cursor: pointer;
  background: var(--parchment-2); color: var(--ink); border: 2px solid var(--ink); padding: 4px 10px 5px;
}
.tabs button:hover { background: #f2d9a6; }
.tabs button.on { background: var(--wood); color: var(--parchment); }
.find { font: inherit; font-size: 17px; padding: 6px 10px; border: 2px solid var(--ink); background: #fbf4e2; width: 260px; max-width: 100%; margin: 0 0 14px; }
table.scores { width: 100%; border-collapse: collapse; background: #f8efd8; border: 3px solid var(--ink); }
table.scores th { font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-weight: 600; text-align: left; background: var(--wood); color: var(--parchment); padding: 8px 12px; }
table.scores td { padding: 7px 12px; border-top: 1px solid #d8c49a; }
table.scores tr:nth-child(even) td { background: #f1e5c7; }
table.scores td.num, table.scores th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.scores tr.hit td { background: #fbe3a4; }
.muted { color: var(--ink-soft); font-size: 16px; }

/* ── World map (map.js: a canvas the width of the window, the key and the zoom buttons over it) ───────────── */
.mapsection { padding-bottom: 0; }
.mapstage {
  position: relative; height: 78vh; min-height: 420px; margin-top: 18px; background: #26211b;
  border-top: 3px solid var(--trim); border-bottom: 3px solid var(--trim);
  --label-bg: rgba(43, 31, 20, .88); --label-edge: #c9a467; --label-ink: #f0e3c4;
}
.mapstage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.mapstage canvas:active { cursor: grabbing; }
.mapfallback { width: 100%; height: auto; image-rendering: pixelated; }
.mapkey {
  position: absolute; top: 14px; left: 14px; max-height: calc(100% - 28px); overflow: auto;
  border: 3px solid var(--ink); outline: 2px solid var(--trim); background: rgba(43, 31, 20, .9); color: var(--parchment);
  padding: 8px 14px 10px; min-width: 170px;
}
.mapkey summary { cursor: pointer; font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-size: 19px; color: var(--parchment); }
.mapkey ul { list-style: none; margin: 6px 0 0; padding: 0; }
.mapkey li { display: flex; align-items: center; gap: 10px; padding: 2px 0; font-size: 15px; }
.mapkey img { width: 24px; height: 24px; image-rendering: pixelated; }
.mapcontrols { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.mapcontrols button {
  font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-size: 18px; min-width: 40px; height: 38px; padding: 0 12px;
  border: 3px solid var(--ink); background: var(--trim); color: var(--ink); cursor: pointer;
}

@media (max-width: 800px) {
  .topbar .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 6px; }
  .status { margin-left: 0; }
  .mapstage { height: 70vh; }
  .mapkey { min-width: 0; }
}

/* ── Look toggle (parchment / granite, look.js) ──────────────────────── */
.look-toggle {
  font-family: "Sour Gummy", "Trebuchet MS", sans-serif; font-size: 15px; cursor: pointer;
  background: transparent; color: var(--parchment-2); border: 2px solid var(--wood-hi); padding: 3px 10px 4px;
  margin-left: 22px; white-space: nowrap;
}
.look-toggle:hover { color: var(--wisp); border-color: var(--wisp); }
.look-toggle:focus-visible { outline: 2px solid var(--wisp); outline-offset: 2px; }
@media (max-width: 800px) { .look-toggle { margin-left: 0; font-size: 14px; } }
.topbar .nav { margin-left: auto; }