/* =====================================================================
   dsl.css - shared site styles for dsl-mud.org
   Linked from header_template.htm, so every page that includes the
   header gets it. Phase 1 covers the frame only (header, nav bar,
   left sidebar boxes, footer); page bodies keep their own styles.
   ===================================================================== */

/* Legacy: was in header_template's <style> and applies page-wide. */
.style6 { font-size: x-small; }

/* ----- Tokens ----- */
:root {
  --dsl-bg: #0d0b08;
  --dsl-panel: #17130d;
  --dsl-line: #3a2c14;
  --dsl-gold: #de961d;
  --dsl-gold-hi: #ffd27a;
  --dsl-gold-lo: #9c5f0e;
  --dsl-text: #e9dfc9;
  --dsl-muted: #a8977a;
  --dsl-serif: Cinzel, "Trajan Pro", Georgia, "Times New Roman", serif;
  --dsl-sans: "Segoe UI", system-ui, -apple-system, Roboto, Verdana, sans-serif;
}

/* =====================================================================
   Header (header_template.htm) - unchanged design, moved here
   ===================================================================== */
.dslhdr {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 131px;
  padding: 0 24px 0 0;
  background:
    radial-gradient(ellipse 520px 150px at 58% 55%, rgba(222,150,29,.16), rgba(0,0,0,0) 70%),
    #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
.dslhdr a { text-decoration: none; }

/* Logo is a JPG on black - keep its cell pure black so no edge shows. */
.dslhdr-logo { flex: 0 0 auto; display: block; background: #000; line-height: 0; }
.dslhdr-logo img { display: block; width: 300px; height: 131px; border: 0; }

.dslhdr-brand { flex: 1 1 auto; min-width: 0; text-align: center; }
.dslhdr-title {
  font-family: var(--dsl-serif);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: .06em;
  color: #e3a33c;
  background: linear-gradient(180deg, #ffe2a0 0%, #e8a83c 45%, #9c5f0e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px rgba(222,150,29,.25);
}
.dslhdr-rule {
  width: 60%;
  max-width: 420px;
  height: 1px;
  margin: 8px auto 9px;
  background: linear-gradient(90deg, rgba(222,150,29,0), #de961d, rgba(222,150,29,0));
}
.dslhdr-connect {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #5a3606;
  border-radius: 999px;
  background: #120a01;
  color: #c9a46a;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  letter-spacing: .02em;
}
.dslhdr-connect b { color: #ffd27a; font-weight: 700; }

.dslhdr-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.dslhdr-play {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid #ffcf7a;
  border-radius: 4px;
  background: linear-gradient(180deg, #f0b24a, #c87a12);
  color: #1a0d00 !important;
  font-family: var(--dsl-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  box-shadow: 0 0 14px rgba(222,150,29,.35);
}
.dslhdr-play:hover, .dslhdr-play:focus { background: linear-gradient(180deg, #ffc867, #de961d); }

.dslhdr-social { display: flex; gap: 8px; }
.dslhdr-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #5a3606;
  border-radius: 50%;
}
/* Including pages set their own a:link/a:visited colours - override them here. */
.dslhdr .dslhdr-social a:link, .dslhdr .dslhdr-social a:visited { color: #c9a46a !important; }
.dslhdr .dslhdr-social a:hover, .dslhdr .dslhdr-social a:focus { color: #000 !important; background: #de961d; border-color: #de961d; }
.dslhdr-social svg { width: 15px; height: 15px; fill: currentColor !important; }

@media (max-width: 1000px) {
  .dslhdr-title { font-size: 28px; }
}
@media (max-width: 760px) {
  .dslhdr { flex-direction: column; gap: 10px; padding: 0 16px 14px; }
  .dslhdr-side { flex-direction: row; align-items: center; }
  .dslhdr-title { font-size: 24px; }
}

/* =====================================================================
   Nav bar (top_template.htm) - replaces the orange [ home | ... ] strip
   ===================================================================== */
.dslnav {
  position: sticky;   /* sticks once the nav is a direct child of <body> (converted pages) */
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  background: #0a0806;
  border-top: 3px solid var(--dsl-gold);
  border-bottom: 1px solid var(--dsl-line);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  font-family: var(--dsl-sans);
  text-align: left;
}
.dslnav ul { list-style: none; margin: 0; padding: 0; }
.dslnav-toggle {
  display: none;
  margin: 6px 0;
  padding: 6px 12px;
  border: 1px solid var(--dsl-line);
  border-radius: 4px;
  background: none;
  color: var(--dsl-gold-hi);
  font: 600 14px var(--dsl-serif);
  cursor: pointer;
}
.dslnav-menu { display: flex; align-items: center; gap: 2px; flex: 1; }
.dslnav-menu > li { position: relative; }
.dslnav-menu > li > a,
.dslnav-menu > li > button {
  display: block;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: #e7cf9c !important;
  font: 600 13px var(--dsl-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.dslnav-menu > li > a:hover,
.dslnav-menu > li > button:hover,
.dslnav-menu > li:focus-within > button { color: #fff !important; background: #1c150b; }
.dslnav-caret { margin-left: 4px; font-size: 9px; opacity: .7; }
.dslnav-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: 8px 0 !important;
  background: var(--dsl-panel);
  border: 1px solid var(--dsl-line);
  border-top: 2px solid var(--dsl-gold);
  box-shadow: 0 12px 24px rgba(0,0,0,.6);
}
.dslnav-menu > li:hover .dslnav-drop,
.dslnav-menu > li:focus-within .dslnav-drop { display: block; }
.dslnav-drop a {
  display: block;
  padding: 6px 16px;
  color: var(--dsl-text) !important;
  font-size: 14px;
  text-decoration: none;
}
.dslnav-drop a:hover, .dslnav-drop a:focus { background: #2a2010; color: var(--dsl-gold-hi) !important; }
.dslnav-drop small { color: var(--dsl-muted); font-size: 11px; }
.dslnav-online { margin-left: auto; color: var(--dsl-muted) !important; font-size: 13px; white-space: nowrap; text-decoration: none; }
.dslnav-online:hover { color: var(--dsl-gold-hi) !important; }
.dslnav-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 6px #4caf50; }

@media (max-width: 860px) {
  .dslnav { flex-wrap: wrap; }
  .dslnav-toggle { display: block; }
  .dslnav-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: 6px; }
  .dslnav.is-open .dslnav-menu { display: flex; }
  .dslnav-drop { position: static; display: block; padding: 0 0 6px 14px !important; border: 0; background: none; box-shadow: none; }
  .dslnav-caret { display: none; }
}

/* =====================================================================
   Left sidebar boxes (algoron/inside/software/links templates)
   The box markup (title cell + parchment cell) is copied into each page,
   so it's restyled from the template content outward with :has().
   Browsers without :has() simply keep the old parchment look.
   ===================================================================== */
td:has(> .dsl-side) {
  background: var(--dsl-panel) !important;
  padding: 8px 10px !important;
}
tr:has(+ tr > td > .dsl-side) > td {
  background: #0a0806 !important;
  border-bottom: 2px solid var(--dsl-gold);
  padding: 8px 10px !important;
}
tr:has(+ tr > td > .dsl-side) > td,
tr:has(+ tr > td > .dsl-side) > td font,
tr:has(+ tr > td > .dsl-side) > td b {
  color: var(--dsl-gold) !important;
  font-family: var(--dsl-serif) !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .06em;
}
ul.dsl-side { list-style: none; margin: 0; padding: 0; }
.dsl-side li { margin: 0; }
.dsl-side a,
.dsl-side a:link,
.dsl-side a:visited {
  display: block;
  padding: 3px 4px;
  border-radius: 3px;
  color: #FFFFFF !important;   /* old look: white bold links (no :has support) */
  font: bold 13px/1.35 Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
}
td:has(> .dsl-side) .dsl-side a { color: var(--dsl-text) !important; font-weight: 600; font-family: var(--dsl-sans); }
td:has(> .dsl-side) .dsl-side a:hover,
td:has(> .dsl-side) .dsl-side a:focus { background: #2a2010; color: var(--dsl-gold-hi) !important; }
.dsl-side small { font-size: 8pt; opacity: .7; }

/* =====================================================================
   Page content wrapper (converted pages: layout_top.htm ... layout_bottom.htm)
   Old pages are full of fixed-width tables; on narrow screens they scroll
   sideways inside this box instead of stretching the whole page.
   ===================================================================== */
.dsl-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 16px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   Footer (copyright.htm)
   ===================================================================== */
.dslfoot {
  margin-top: 30px;
  background: #000;
  border-top: 3px solid var(--dsl-gold);
  color: var(--dsl-muted);
  font-family: var(--dsl-sans);
  text-align: left;
}
.dslfoot-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 20px;
}
.dslfoot-logo { flex: 0 0 auto; line-height: 0; }
.dslfoot-logo img { display: block; width: 240px; height: auto; border: 0; }
.dslfoot-col { flex: 1 1 140px; }
.dslfoot h4 { margin: 4px 0 10px; color: var(--dsl-gold); font: 700 13px var(--dsl-serif); letter-spacing: .1em; }
.dslfoot ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.9; }
.dslfoot ul a, .dslfoot ul a:visited { color: #cdbd9b !important; text-decoration: none; }
.dslfoot ul a:hover { color: var(--dsl-gold-hi) !important; }
.dslfoot-copy {
  padding: 12px;
  border-top: 1px solid #1d170e;
  color: #6e604a;
  font-size: 12px;
  text-align: center;
}
.dslfoot-copy img { display: block; width: 100px; height: 30px; margin: 4px auto 8px; border: 0; }