/* Return to the Well web site (src/site.ts). A classic three-column game-site front
   page: banner, motto strip, menu | content | tiles, footer. No scripts. */

:root {
  --night: #0d1030;
  --deep: #1b1850;
  --violet: #4a2f6e;
  --gold: #ffd98a;
  --gold-dark: #b8862e;
  --well: #7fe3ff;
  --well-dark: #1f6f99;
  --menu: #e4dcf5;
  --menu-edge: #a99ccc;
  --menu-head: #3b2a63;
  --paper: #fbf8f1;
  --ink: #23202c;
  --muted: #6a6578;
  --rule: #d8d0e6;
  --link: #2a4fa0;
  --link-visited: #6a3d99;
}

* { box-sizing: border-box; }

html { background: var(--night); }
body {
  margin: 0;
  padding: 16px 0 24px;
  background: var(--night) radial-gradient(ellipse at 50% 0, #262064 0, var(--night) 70%) no-repeat;
  color: var(--ink);
  font: 14px/1.55 Verdana, Tahoma, Geneva, sans-serif;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { color: #c0392b; }

.page {
  max-width: 960px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid #000;
  box-shadow: 0 0 0 4px var(--deep), 0 0 40px rgba(127, 227, 255, 0.18);
}

/* ---------------------------------------------------------------- banner */

.banner { line-height: 0; background: var(--deep); }
.banner img { display: block; width: 100%; height: auto; }

.strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 12px;
  background: linear-gradient(#5b3c86, var(--violet));
  border-top: 1px solid #8a6cb8;
  border-bottom: 2px solid #000;
  color: #e9e1ff;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.strip-left { text-transform: uppercase; font-weight: bold; color: var(--gold); }
.strip-motto { font: italic 13px Georgia, "Times New Roman", serif; color: #fff4d6; text-align: center; }
.strip-right b { color: var(--well); }

/* --------------------------------------------------------------- columns */

.cols {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 190px;
}

/* left menu */
.menu {
  background: var(--menu);
  border-right: 1px solid var(--menu-edge);
  padding: 10px 0 18px;
  font-size: 12px;
}
.menu h3 {
  margin: 12px 0 4px;
  padding: 3px 12px;
  background: linear-gradient(90deg, var(--menu-head), #6c5a9a);
  color: #fff;
  font: bold 11px Verdana, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.menu-group:first-child h3 { margin-top: 0; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a {
  display: block;
  padding: 3px 12px 3px 22px;
  color: #2b2350;
  text-decoration: none;
  position: relative;
}
.menu li a::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--menu-edge);
}
.menu li a:hover { background: #d3c8ee; color: #000; }
.menu li.on a { background: #fff; font-weight: bold; color: #000; border-left: 3px solid var(--gold-dark); padding-left: 19px; }
.menu li.on a::before { background: var(--gold-dark); left: 8px; }

/* centre */
.main { padding: 16px 20px 24px; min-width: 0; }
.main h1 {
  margin: 0 0 12px;
  font: bold 24px Georgia, "Times New Roman", serif;
  color: var(--deep);
}
.main h2 {
  margin: 20px 0 6px;
  font: bold 17px Georgia, "Times New Roman", serif;
  color: var(--violet);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.main p { margin: 0 0 10px; }
.main code { font: 12px Consolas, "Courier New", monospace; background: #efeaf7; padding: 0 3px; }

/* right rail */
.rail {
  background: #efeaf7;
  border-left: 1px solid var(--menu-edge);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tile {
  display: block;
  min-height: 92px;
  padding: 10px 10px 10px 58px;
  border: 1px solid #000;
  color: #fff;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 8px 50%, 0 0;
  background-size: 42px 42px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.tile:visited { color: #fff; }
.tile:hover { color: #fff; filter: brightness(1.15); }
.tile-title { display: block; font: bold 15px Georgia, serif; color: var(--gold); margin-bottom: 3px; }
.tile-text { display: block; font-size: 11px; line-height: 1.4; }
.t-guild { background-image: url(guilds.svg), linear-gradient(135deg, #5c1e1e, #2a0d0d); }
.t-worlds { background-image: url(worlds.svg), linear-gradient(135deg, #1d4d3a, #0b2219); }
.t-host { background-image: url(remix.svg), linear-gradient(135deg, #20406e, #0c1a33); }
.t-builds { background-image: url(client.svg), linear-gradient(135deg, #4b2f6e, #1d1236); }

/* ---------------------------------------------------------------- featured */

.featured {
  display: flex;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px;
  border: 2px solid var(--gold-dark);
  background: linear-gradient(160deg, #fffaf0, #f3ead4);
  box-shadow: inset 0 0 0 3px #fff;
}
.featured-art {
  flex: 0 0 150px;
  min-height: 170px;
  border: 1px solid #000;
  background: url(featured.svg) center / cover no-repeat, var(--deep);
}
.featured-body { min-width: 0; }
.kicker {
  margin: 0 0 2px !important;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.featured h1 { margin-bottom: 8px; }

.btn {
  display: inline-block;
  margin: 4px 0 6px;
  padding: 8px 18px;
  border: 1px solid #0a2440;
  border-radius: 3px;
  background: linear-gradient(#3fb1e6, var(--well-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #0a2440;
  color: #fff !important;
  font: bold 15px Verdana, sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 0 #0a2440;
}
.btn:hover { background: linear-gradient(#5cc6f5, #2585b5); }
/* The secondary (Linux) download button: smaller, in the menu's violet. */
.btn-alt {
  padding: 6px 14px;
  border-color: #241a3d;
  background: linear-gradient(#7a5ca8, var(--violet));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #241a3d;
  font-size: 13px;
  text-shadow: 0 1px 0 #241a3d;
}
.btn-alt:hover { background: linear-gradient(#9174bf, #5b3d85); }
.dl-meta { font-size: 11px; color: var(--muted); }
.dl-also { font-size: 12px; }

/* ------------------------------------------------------------------ blurbs */

.blurb {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dotted var(--menu-edge);
}
.blurb-art {
  flex: 0 0 96px;
  height: 96px;
  border: 1px solid #000;
  background: var(--deep) center / 72px 72px no-repeat;
}
.blurb-text { min-width: 0; }
.blurb h2 { margin-top: 0; border: 0; }
.more { font-size: 12px; font-weight: bold; }
.b-client .blurb-art { background-image: url(client.svg); background-color: #2b1b47; }
.b-remix .blurb-art { background-image: url(remix.svg); background-color: #12284a; }
.b-worlds .blurb-art { background-image: url(worlds.svg); background-color: #10322a; }
.b-guilds .blurb-art { background-image: url(guilds.svg); background-color: #3c1414; }

/* ------------------------------------------------------- lists and tables */

.steps { padding-left: 22px; }
.steps li { margin-bottom: 8px; }
.faq dt { font-weight: bold; color: var(--deep); margin-top: 10px; }
.faq dd { margin: 2px 0 0 16px; }

.scroll { overflow-x: auto; margin: 0 0 12px; }
table.data { border-collapse: collapse; width: 100%; font-size: 12px; }
table.data th, table.data td { border: 1px solid var(--menu-edge); padding: 4px 6px; text-align: left; vertical-align: top; }
table.data th { background: var(--menu-head); color: #fff; font-weight: bold; }
table.data tr:nth-child(even) td { background: #f2eef9; }
table.data.info th { background: #e4dcf5; color: var(--ink); width: 55%; font-weight: normal; }

.note { font-size: 11px; color: var(--muted); }
.err { color: #b00000; font-weight: bold; }

/* screenshots */
figure.shot { margin: 4px 0 14px; }
figure.shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--menu-edge); }
figure.shot figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------------ footer */

.foot {
  padding: 10px 16px;
  background: var(--deep);
  border-top: 2px solid #000;
  color: #c9c2e6;
  font-size: 11px;
  text-align: center;
}
.foot p { margin: 2px 0; }

/* -------------------------------------------------------- narrow screens */

@media (max-width: 860px) {
  .cols { grid-template-columns: 150px minmax(0, 1fr); }
  .rail {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    border-top: 1px solid var(--menu-edge);
  }
  .tile { flex: 1 1 200px; }
}

@media (max-width: 640px) {
  body { padding: 0; }
  .page { border: 0; box-shadow: none; }
  .strip { flex-wrap: wrap; justify-content: center; text-align: center; }
  .strip-motto { order: -1; flex-basis: 100%; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .menu {
    border-right: 0;
    border-bottom: 1px solid var(--menu-edge);
    padding: 6px 16px 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
  }
  .menu h3, .menu-group:first-child h3 { margin: 8px 0 2px; padding: 2px 6px; }
  .menu li a { padding: 4px 6px 4px 16px; }
  .menu li a::before { left: 5px; }
  .main { padding: 14px 16px 20px; }
  .featured { flex-direction: column; }
  .featured-art { flex-basis: auto; min-height: 130px; background-position: center 78%; }
  .blurb-art { flex-basis: 64px; height: 64px; background-size: 48px 48px; }
  .rail { padding: 10px 16px; }
}

/* ---- long-form pages (World Development, Cheat Codes) ---- */
.main h3 { font: bold 13px Georgia, "Times New Roman", serif; color: var(--deep); margin: 14px 0 4px; }
.main ul, .main ol { margin: 0 0 10px; padding-left: 22px; }
.main li { margin-bottom: 4px; }
.main pre {
  font: 12px Consolas, "Courier New", monospace;
  background: #efeaf7;
  border: 1px solid var(--menu-edge);
  padding: 8px 10px;
  margin: 0 0 12px;
  overflow-x: auto;
}
.subnav {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
}
.subnav li { margin: 0; }
.subnav li.on a { font-weight: bold; color: var(--deep); text-decoration: none; }