/* Shared by every MayaSpace page: colors, background, header, nav, boxes, footer. */
:root {
  --pink: #ff6fae;
  --pink-light: #ff9cc9;
  --pink-bar: #f58cb8;
  --border: #e2639b;
  --text: #e9e9e9;
  --muted: #8a8a8a;
  --panel: #000;
  --nav: #0b3a96;
  --nav-dark: #062a73;
  --online: #3fd13f;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  font: 14px/1.45 Verdana, Tahoma, "DejaVu Sans", sans-serif;
  background-color: #050003;
  /* skulls + stars tile */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cdefs%3E%3Cg id='s'%3E%3Cpath d='M-14 14 L14 -2 M14 14 L-14 -2' stroke='%23862a52' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='-15' cy='15' r='3.5' fill='%23862a52'/%3E%3Ccircle cx='15' cy='15' r='3.5' fill='%23862a52'/%3E%3Ccircle cx='-15' cy='-3' r='3.5' fill='%23862a52'/%3E%3Ccircle cx='15' cy='-3' r='3.5' fill='%23862a52'/%3E%3Cpath d='M0 -22 C-12 -22 -15 -13 -15 -7 C-15 -1 -10 1 -8 3 L-8 9 L8 9 L8 3 C10 1 15 -1 15 -7 C15 -13 12 -22 0 -22 Z' fill='%23862a52'/%3E%3Ccircle cx='-6' cy='-8' r='4' fill='%23050003'/%3E%3Ccircle cx='6' cy='-8' r='4' fill='%23050003'/%3E%3Cpath d='M0 -3 L-2 1 L2 1 Z' fill='%23050003'/%3E%3C/g%3E%3Cpath id='t' d='M0 -18 L5.3 -6 L18 -5.5 L8.2 3 L11.5 16 L0 9 L-11.5 16 L-8.2 3 L-18 -5.5 L-5.3 -6 Z' fill='%23701f45'/%3E%3C/defs%3E%3Cuse href='%23s' x='35' y='40'/%3E%3Cuse href='%23s' x='150' y='150' transform='rotate(-12 150 150)'/%3E%3Cuse href='%23t' x='150' y='35' transform='rotate(14 150 35)'/%3E%3Cuse href='%23t' x='45' y='160' transform='scale(1.2) translate(-8 -27)'/%3E%3Cuse href='%23t' x='105' y='95' transform='scale(.7) translate(45 40)' opacity='.8'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

a { color: var(--pink); font-weight: bold; text-decoration: none; }
a[href]:hover { text-decoration: underline; }
/* links with no href are just for show: same look, not clickable */
a:not([href]) { cursor: default; }

/* ---------- header ---------- */
.topbar {
  background: #000;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 14px 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.logo { display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: normal; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 42px; height: 42px; flex: none; }
.logo-text { line-height: 1; }
.logo-text b { display: block; font: bold 30px/1 Arial, Helvetica, sans-serif; letter-spacing: -1px; }
.logo-text span { display: block; text-align: right; font: bold 15px/1.1 Arial, Helvetica, sans-serif; margin-top: 1px; }
.account { font-size: 14px; color: #fff; white-space: nowrap; }
.account a { color: #79a6ff; font-weight: normal; }
.account .sep { color: #555; margin: 0 6px; }
.account .viewer { color: var(--pink); font-weight: bold; }

.nav {
  max-width: 1400px;
  margin: 0 auto;
  background: linear-gradient(#1449b4, var(--nav) 55%, var(--nav-dark));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  gap: 10px;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav li { display: flex; align-items: center; }
.nav li + li::before { content: "|"; color: #6a8ad0; margin: 0 2px; }
.nav li a { color: #fff; font-weight: normal; padding: 2px 9px; font-size: 14.5px; }
.search { display: flex; gap: 6px; }
.search input {
  width: 228px; font: 14px Verdana, sans-serif; padding: 3px 5px;
  border: 1px solid #7f9db9; background: #fff; color: #333;
}
.search input:disabled { opacity: 1; color: #333; -webkit-text-fill-color: #333; cursor: default; }
.search button {
  font: 14px Verdana, sans-serif; padding: 2px 13px; cursor: pointer;
  border: 1px solid #fff; border-radius: 2px; background: linear-gradient(#fff, #e3e3e3); color: #000;
}
.search button:disabled { opacity: 1; color: #000; cursor: default; }

.box {
  background: var(--panel);
  border: 2px solid var(--border);
  padding: 10px 12px;
}
.box h2 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--pink-light);
}
.box.flush { padding: 0; }
.box .bar {
  background: var(--pink-bar);
  color: #111;
  font-weight: bold;
  font-size: 15px;
  padding: 5px 12px;
  margin: 0;
}
.pink { color: var(--pink-light); }
.sub { color: var(--pink-light); font-weight: bold; }

.footer { text-align: center; color: #888; font-size: 11px; padding: 0 16px 30px; }
.footer a { color: #79a6ff; font-weight: normal; }

@media (max-width: 700px) {
  body { font-size: 14px; background-size: 170px; }
  .topbar { padding: 10px 12px 8px; align-items: center; }
  .logo-text b { font-size: 24px; }
  .logo-text span { font-size: 12px; }
  .logo-mark { width: 32px; height: 32px; }
  .account { font-size: 12px; }
  .account .opt { display: none; }
  /* phone nav: Home | Browse + search box */
  .nav { padding: 6px 8px; gap: 8px; }
  .nav ul { flex-wrap: nowrap; flex: none; }
  .nav li.d { display: none; }
  .nav li a { white-space: nowrap; font-size: 13.5px; padding: 2px 6px; }
  .search { flex: 1; min-width: 0; gap: 5px; }
  /* 16px stops iOS zooming in when the box is tapped */
  .search input { width: auto; flex: 1; min-width: 0; font-size: 16px; padding: 1px 5px; }
  .search button { font-size: 13px; padding: 2px 8px; }
}

@media (max-width: 480px) {
  .account .links { display: none; }
  .account .viewer {
    display: inline-block; max-width: 34vw; vertical-align: bottom;
    overflow: hidden; text-overflow: ellipsis;
  }
}

@media (max-width: 350px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .logo-text b { font-size: 20px; }
  .logo-text span { font-size: 11px; }
  .logo-mark { width: 28px; height: 28px; }
  .nav { padding: 6px; gap: 6px; }
  .nav li a { font-size: 13px; padding: 2px 4px; }
  .nav li + li::before { margin: 0; }
  .search button { padding: 2px 6px; }
}