/* ==========================================================================
   BrainBread - Modernized stylesheet (2026)
   Replaces inline styles and textads.css.
   Designed to override legacy <font>, <table>, bgcolor, etc. without
   touching the mid_*.php content pages.
   ========================================================================== */

/* --- Reset & Base -------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  background: #3a3a3a;
  color: #ddd;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Links --------------------------------------------------------------- */
a:link    { color: #44ff44; text-decoration: none; }
a:visited { color: #55ff55; text-decoration: none; }
a:hover,
a:focus   { color: #ccffcc; text-decoration: none; }
a { transition: color 0.15s ease; }

/* --- Layout shell (set by index.php) ------------------------------------- */
.site-wrapper {
  display: flex;
  max-width: 820px;
  margin: 0 auto;
  min-height: 100vh;
  background: #505050;
  box-shadow: 0 0 40px rgba(0,0,0,.45);
}

.sidebar {
  width: 144px;
  min-width: 144px;
  background: #404040;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sidebar img {
  display: block;
}

.sidebar nav {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.sidebar-bottom {
  padding: 16px 8px;
  text-align: center;
  font-size: 12px;
  align-self: stretch;
}

.sidebar-bottom a {
  display: inline-block;
  margin: 4px 0;
  color: #ccc;
  transition: color 0.15s ease;
}

.sidebar-bottom a:hover {
  color: #fff;
}

.sidebar-bottom .donate-btn {
  display: block;
  margin: 0 auto 8px;
  text-align: center;
}

.sidebar-bottom .donate-btn img {
  display: inline;
}

.content {
  flex: 1;
  min-width: 0;
}

.banner-wrap {
  background: #1a1a1a;
  line-height: 0;
}

.banner-wrap > .banner {
  display: block;
}

.page-content {
  padding: 20px 24px 32px;
}

.site-footer {
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 16px;
  text-align: right;
  font-size: 11px;
  color: #888;
}

/* --- Override legacy <font> tags ----------------------------------------- */
/* Normalize all <font> to inherit the modern base font */
font {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Re-apply size where the page explicitly sets size="1" (captions, small) */
font[size="1"] {
  font-size: 11px !important;
}

/* size="2" is the base size used everywhere — keep it at our base */
font[size="2"] {
  font-size: 14px !important;
}

/* size="3" is used for section sub-headers */
font[size="3"] {
  font-size: 17px !important;
  font-weight: 600;
}

/* size="4" is used for category headers (credits page) */
font[size="4"] {
  font-size: 20px !important;
  font-weight: 600;
  color: #aaa !important;
}

/* Ensure color="000000" / color="#000000" (invisible headers) become visible */
font[color="000000"],
font[color="#000000"] {
  color: #999 !important;
}

/* Preserve explicit white */
font[color="#ffffff"],
font[color="white"],
font[color="#c0c0c0"] {
  color: #ddd !important;
}

font[color="silver"] {
  color: #ccc !important;
}

/* --- Override legacy <center>, <div align="center"> ---------------------- */
center,
div[align="center"],
DIV[ALIGN="center"] {
  text-align: center;
}

/* --- Content tables (news, mirrors, maps, credits) ----------------------- */
/* Generic dark tables used in content pages */
.page-content table {
  border-collapse: separate;
  border-spacing: 0 1px;
  margin-left: auto;
  margin-right: auto;
}

.page-content table td {
  padding: 6px 10px;
}

/* --- News article cards -------------------------------------------------- */
.news-card {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  margin: 0 auto 16px;
  background: #000;
}

.news-header {
  padding: 10px 12px;
  background: #000;
  vertical-align: middle;
}

.news-header img {
  vertical-align: middle;
  position: relative;
  top: -2px;
  border-radius: 2px;
  margin-right: 4px;
}

.news-header small {
  color: #999;
}

.news-body {
  background: #2a2a2a;
  padding: 12px 14px;
  line-height: 1.6;
}

.news-footer {
  background: #222;
  padding: 6px 12px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

/* --- Download button (news page) ----------------------------------------- */
.download-btn {
  display: inline-block;
  background: #2a2a2a;
  border: 1px solid #44ff44;
  border-radius: 4px;
  padding: 6px 18px;
  margin: 8px 0;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.download-btn:hover {
  background: #44ff44;
  color: #1a1a1a;
}

/* --- Latest user maps (news page) ---------------------------------------- */
.latest-maps {
  width: 360px;
  margin: 12px auto 24px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  font-size: 12px;
}

.latest-maps-header {
  display: flex;
  justify-content: space-between;
  background: #1a1a1a;
  padding: 6px 10px;
  font-weight: 600;
}

.latest-maps-row {
  display: flex;
  justify-content: space-between;
  background: #2e2e2e;
  padding: 4px 10px;
}

.latest-maps-row small {
  color: #999;
}

/* --- Comments ------------------------------------------------------------ */
.comment {
  background: #3a3a3a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.comment-meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
}

.comment-meta strong {
  color: #ddd;
}

.comment-body {
  line-height: 1.5;
}

/* --- Comment form -------------------------------------------------------- */
.comment-form .form-row {
  margin-bottom: 12px;
}

.comment-form .form-row:last-child {
  margin-top: 20px;
}

.comment-form label {
  display: block;
  margin-bottom: 4px;
}

.comment-form label small {
  color: #999;
}

/* --- News archive pagination --------------------------------------------- */
.news-pagination {
  text-align: center;
  padding: 12px 0;
  font-size: 13px;
}

/* --- Mirror / download tables -------------------------------------------- */
.page-content table[width="90%"] {
  width: 100% !important;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.page-content table[width="90%"] tr[bgcolor="#000000"] td {
  background: #1a1a1a;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 8px 12px;
}

.page-content table[width="90%"] tr[bgcolor="#2e2e2e"] td {
  background: #2a2a2a;
  padding: 8px 12px;
}

/* --- Maps list table ----------------------------------------------------- */
.page-content table[cellpadding="3"][cellspacing="1"] {
  width: 100% !important;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.page-content table[cellpadding="3"][cellspacing="1"] tr[bgcolor="#000000"] td {
  background: #1a1a1a;
  font-weight: 600;
  padding: 8px 10px;
}

.page-content table[cellpadding="3"][cellspacing="1"] tr[bgcolor="#2e2e2e"] td {
  background: #2a2a2a;
  padding: 6px 10px;
  transition: background 0.15s ease;
}

.page-content table[cellpadding="3"][cellspacing="1"] tr[bgcolor="#2e2e2e"]:hover td {
  background: #353535;
}

/* (Latest User Maps and news pagination now use class-based selectors above) */

/* --- Credits tables ------------------------------------------------------ */
.page-content table[width="100%"] {
  margin-bottom: 12px;
}

.page-content table[width="100%"] td {
  padding: 4px 8px;
  vertical-align: top;
}

/* --- Mapinfo detail box -------------------------------------------------- */
.page-content div[style*="border-style: solid"][style*="border-color: #111111"] {
  border-color: #333 !important;
  border-radius: 6px;
  padding: 16px !important;
  background: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* --- Screenshot gallery (media page) ------------------------------------- */
.page-content table[width="612"] {
  border-spacing: 8px;
}

.page-content table[width="612"] td {
  padding: 0;
}

.page-content table[width="612"] a {
  display: block;
}

.page-content table[width="612"] img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #222 !important;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}

.page-content table[width="612"] img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  opacity: 0.9;
}

/* --- Section header images (news.jpg, ingame.jpg, etc.) ------------------ */
/* No drop-shadow here: several header images (e.g. news.jpg) have
   transparent backgrounds, which makes the shadow look wrong. */
.page-content > div > img[src^="graphic/"],
.page-content > DIV > IMG[SRC^="graphic/"],
.page-content div[align="center"] > img[src^="graphic/"],
.page-content DIV[ALIGN="center"] > IMG[SRC^="graphic/"] {
  margin: 8px 0 16px;
}

/* --- About page story tables --------------------------------------------- */
.page-content table[border="0"][valign="top"],
.page-content TABLE[BORDER="0"][valign="top"] {
  margin: 0 auto 16px;
}

.page-content table[border="0"][valign="top"] td,
.page-content TABLE[BORDER="0"][valign="top"] td,
.page-content TABLE[BORDER="0"][valign="top"] TD {
  padding: 6px 10px;
  vertical-align: top;
}

/* Character/NPC images */
.page-content img.shadow {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Bullet list images */
.page-content img[src="graphic/list.jpg"] {
  opacity: 0.7;
  vertical-align: middle;
}

/* --- Forms (comments, map upload) ---------------------------------------- */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="number"],
.page-content textarea {
  background: #2a2a2a;
  color: #ddd;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-content input[type="text"]:focus,
.page-content input[type="email"]:focus,
.page-content input[type="number"]:focus,
.page-content textarea:focus {
  outline: none;
  border-color: #44ff44;
  box-shadow: 0 0 0 2px rgba(68,255,68,.15);
}

.page-content textarea {
  resize: vertical;
  min-height: 80px;
}

.page-content input[type="Submit"],
.page-content input[type="submit"],
.page-content button,
.page-content input.button {
  background: #2a2a2a;
  color: #44ff44;
  border: 1px solid #44ff44;
  border-radius: 4px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.page-content input[type="Submit"]:hover,
.page-content input[type="submit"]:hover,
.page-content button:hover,
.page-content input.button:hover {
  background: #44ff44;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(68,255,68,.25);
}

.page-content input[type="file"] {
  font-family: inherit;
  font-size: 13px;
  color: #ccc;
}

/* --- Horizontal rules ---------------------------------------------------- */
.page-content hr {
  border: none;
  border-top: 1px solid #444;
  margin: 12px 0;
}

/* --- Flag images (credits page) ----------------------------------------- */
.page-content img[src^="flags/"] {
  vertical-align: middle;
}

/* (News archive pagination now uses .news-pagination class above) */

/* (Download CTA now uses .download-btn class above) */

/* --- Sort arrows (maps page) --------------------------------------------- */
img[src="graphic/arrowup.gif"],
img[src="graphic/arrowdown.gif"] {
  vertical-align: middle;
  opacity: 0.7;
}

/* (newssmall.jpg now styled via .news-header img above) */

/* --- Map screenshot in mapinfo ------------------------------------------- */
.page-content img[width="600"][height="400"] {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* --- Scrollbar styling (webkit) ------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #2a2a2a;
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #555 #2a2a2a;
}

/* --- Responsive: prevent horizontal scroll on small screens -------------- */
@media (max-width: 840px) {
  .site-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 660px) {
  .site-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .sidebar {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 8px;
  }

  .sidebar > img:first-child {
    /* topleft.jpg — hide on mobile, banner is enough */
    display: none;
  }

  .sidebar nav {
    display: none;
  }

  .sidebar-bottom {
    margin-top: 0;
    padding: 8px 12px;
  }

  .content {
    width: 100%;
  }

  .content > .banner {
    max-width: 100%;
  }

  .page-content {
    padding: 16px 12px 24px;
  }

  .page-content table {
    max-width: 100% !important;
    overflow-x: auto;
  }

  .page-content table[width="612"] {
    border-spacing: 4px;
  }

  .page-content img {
    max-width: 100%;
    height: auto;
  }
}

/* --- Legacy textads.css classes (kept for compatibility) ------------------ */
.textad {
  background-color: #000;
  width: 140px;
  font-size: 12px;
}

.headline {
  background-color: #000;
}

.text {
  background-color: #2e2e2e;
}

.link {
  background-color: #220000;
}

/* --- Selection color ----------------------------------------------------- */
::selection {
  background: rgba(68, 255, 68, 0.25);
  color: #fff;
}

::-moz-selection {
  background: rgba(68, 255, 68, 0.25);
  color: #fff;
}