/*
 * DIV-TRAV page stylesheet.
 * Extracted from templates/home.html; no inline <style> remains in the template.
 */

/* Section 1. */
/* Cs.css positions `.overlay` but never hides it; the source relies on
           its own script for that. Declaring it here avoids a flash of the
           open picker before game-pages.js runs. */
        .overlay { display: none; }

.public-world-card.is-coming,
.public-world-card.is-closed {
  opacity: 1;
  filter: grayscale(1);
}

#login_list server,
#signup_list server { font-family: Qtatar; }

.public-world-card [aria-disabled="true"] { cursor: not-allowed; }

.public-world-classic {
  position: absolute;
  right: 8px;
  color: #f90;
  font-size: .9rem;
  text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
}

.public-world-status {
  display: inline;
  padding-top: 0;
  color: #080808;
  font-weight: 700;
  line-height: 22px;
}

/* The supplied 2048×542 home artwork keeps its composition at every width. */
.Main {
  width: 100%;
  height: clamp(120px, 26.464vw, 542px);
  margin-top: 29px;
  background-image: var(--Home);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ── نافذة اختيار العالم — الهوية البصرية ─────────────────────────────────
 *
 * Colour, border, radius and spacing only. Every number the window reports —
 * the world's age, its player count, whether registration is open, the
 * countdown — is computed in `pages::home::load_public_worlds` and rendered by
 * the template untouched. The banner artwork and its per-world
 * `background-position` are untouched too; the card is dressed around them.
 *
 * See «الهوية البصرية» in CLAUDE.md for the palette this follows.
 */
#login_list.overlay_content,
#signup_list.overlay_content {
  color: #3b342a;
  font-family: Arial, Helvetica, sans-serif;
  background: #fdfbf5;
  border: 1px solid #d9cfb4;
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(59, 52, 42, .22);
}

#login_list.overlay_content h2,
#signup_list.overlay_content h2 {
  margin: 0 0 10px;
  padding: 9px 14px 10px;
  color: #3b342a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  background: #fff;
  border: 1px solid #d9cfb4;
  /* The one bronze stroke each panel carries, on its start edge. */
  border-inline-start: 3px solid #8c6d1f;
  border-radius: 6px;
}

/* Each world is a panel like the ones the sign-up page stacks. */
#login_list server.public-world-card,
#signup_list server.public-world-card {
  padding: 5px;
  background: #fff;
  border: 1px solid #d9cfb4;
  border-radius: 6px;
  transition: border-color .12s ease, background .12s ease;
}

#login_list server.public-world-card:hover,
#signup_list server.public-world-card:hover {
  background: #f7f1e0;
  border-color: #8c6d1f;
}

/* A world that cannot be joined stays legible rather than being dimmed into
   guesswork: the grey banner already says "not now", so the panel only needs
   to stop inviting a click. */
.public-world-card.is-coming,
.public-world-card.is-closed {
  background: #faf7ef;
  border-color: #e4dcc6;
}

.public-world-card.is-coming:hover,
.public-world-card.is-closed:hover {
  background: #faf7ef;
  border-color: #e4dcc6;
}

/* «كلاسيكي» — a chip in the tile colour instead of loose orange text.
 *
 * `position: static` matters: it sat absolutely inside a wrapper that
 * shrink-wraps to zero width, so it measured 0 × 0. The glyphs still painted,
 * which is why it looked fine as plain text — but a chip needs a box, and it
 * had none. Static gives it one under the world's name. */
.public-world-classic {
  position: static;
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  color: #6b5216;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: #f7f1e0;
  border: 1px solid #dcc794;
  border-radius: 5px;
  text-shadow: none;
}

.public-world-status {
  color: #6b5216;
  font-family: Arial, Helvetica, sans-serif;
}

/* The world's name and its two figures, over the banner. */
.u-public-ac59dd111a { font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
.u-public-568b9bae09 { font-family: Arial, Helvetica, sans-serif; }