body {
  background-color: #0a0a1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%230a0a1a'/%3E%3Crect x='0' y='0' width='2' height='2' fill='%23001133' fill-opacity='0.4'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23001133' fill-opacity='0.4'/%3E%3C/svg%3E");
  margin: 0;
  padding: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #ccccdd;
  overflow-x: hidden;
}

/* Text overflow prevention - applied to specific elements, not all tables */
.text-wrap {
  word-break: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
}
a:link { color: #00ccff; }
a:visited { color: #00ccff; }
a:hover { color: #ffcc00; text-decoration: underline; }
a:active { color: #ffcc00; }
hr { border-style: dotted; border-width: 1px; border-color: #333366; }

.site-title { font-family: "Comic Sans MS", cursive; font-size: 26px; font-weight: bold; color: #ffcc00; }
.site-sub { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #6699ff; }
.sidebar-hdr { font-family: "Arial Black", sans-serif; font-size: 11px; color: #ffcc00; }
.sectionhdr { font-family: "Arial Black", sans-serif; font-size: 12px; color: #ffcc00; text-decoration: underline; }
.counter { font-family: "Courier New", monospace; font-size: 12px; color: #00ff00; font-weight: bold; }
.muted { color: #666688; font-size: 10px; }
.online { color: #00ff00; font-weight: bold; font-size: 10px; }
.offline { color: #ff0000; font-weight: bold; font-size: 10px; }
.warn { color: #ffcc00; font-size: 10px; }
.online-dot { color: #00ff00; }
.entry-title { font-family: "Arial Black", sans-serif; font-size: 14px; color: #00ccff; }

/* nav */
.nav-btn {
  font-family: "Arial Black", sans-serif;
  font-size: 11px;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 2px 0;
  display: block;
  text-align: center;
}
.nav-btn:hover { color: #ffcc00; text-decoration: none; }
.user-btn { font-weight: bold; }
.user-btn:hover { color: #ffcc00; }

/* more nav dropdown */
.more-nav-wrapper { position: relative; display: inline-block; width: 100%; }
.more-nav-td { padding: 0; }
.more-nav-wrapper .nav-btn { display: block; padding: 6px 0; cursor: default; }
.more-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #000011;
  border: 1px solid #333366;
  border-top: none;
  z-index: 100;
}
.more-nav-wrapper:hover .more-dropdown { display: block; }

/* user dropdown */
.user-nav-wrapper { position: relative; display: inline-block; width: 100%; }
.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #000011;
  border: 1px solid #333366;
  border-top: none;
  z-index: 100;
}
.user-nav-wrapper:hover .user-dropdown { display: block; }
.dropdown-item {
  display: block;
  padding: 6px 8px;
  font-family: "Arial Black", sans-serif;
  font-size: 10px;
  color: #ccccdd;
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid #222244;
}
.dropdown-item:hover { background: #000033; color: #ffcc00; }
.dropdown-item:last-child { border-bottom: none; }

/* notification badge */
.notif-badge {
  display: inline-block;
  background: #ff0000;
  color: #ffcc00;
  font-family: "Arial Black", sans-serif;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  vertical-align: middle;
  line-height: 14px;
}

/* flash messages */
.flash-error {
  background-color: #330000;
  border: 2px solid #ff0000;
  color: #ff6666;
  padding: 8px 12px;
  margin: 8px;
  font-size: 11px;
}
.flash-success {
  background-color: #003300;
  border: 2px solid #00ff00;
  color: #66ff66;
  padding: 8px 12px;
  margin: 8px;
  font-size: 11px;
}

/* auth forms */
.auth-box {
  padding: 16px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.auth-box table {
  width: 100%;
  border-collapse: collapse;
}
.auth-box td {
  padding: 6px 4px;
  font-size: 11px;
  color: #ccccdd;
}
.auth-box td:first-child {
  text-align: right;
  padding-right: 12px;
  font-family: "Arial Black", sans-serif;
  color: #ffcc00;
  white-space: nowrap;
}
.auth-box input[type="text"],
.auth-box input[type="email"],
.auth-box input[type="password"] {
  width: 100%;
  padding: 4px 6px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background: #000022;
  border: 1px solid #333366;
  color: #ccccdd;
}
.auth-box input[type="submit"] {
  font-family: "Arial Black", sans-serif;
  font-size: 12px;
  color: #000033;
  background: #ffcc00;
  border: 2px outset #ffcc00;
  padding: 4px 20px;
  cursor: pointer;
  margin-top: 8px;
}
.auth-box input[type="submit"]:hover {
  background: #ffee66;
}
.auth-box a { color: #00ccff; }
.auth-box a:hover { color: #ffcc00; }
.auth-note {
  font-size: 10px;
  color: #666688;
  text-align: center;
  margin-top: 12px;
}

/* profile page */
.profile-section {
  margin-bottom: 16px;
}
.profile-section table {
  width: 100%;
  border-collapse: collapse;
}
.profile-row td:first-child {
  font-family: "Arial Black", sans-serif;
  font-size: 11px;
  color: #ffcc00;
  padding: 4px 8px;
  white-space: nowrap;
  width: 120px;
}
.profile-row td:last-child {
  color: #ccccdd;
  padding: 4px 8px;
}
.color-preview {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #333366;
  vertical-align: middle;
  margin-right: 6px;
}
input[type="color"] {
  border: none;
  width: 40px;
  height: 24px;
  cursor: pointer;
  background: transparent;
}

/* ── Hotbar (formatting toolbar) ───────────────────────────── */
.hotbar {
  display: flex;
  gap: 2px;
  padding: 3px 4px;
  background: #000022;
  border: 1px solid #333366;
  border-bottom: none;
  flex-wrap: wrap;
  align-items: center;
}
.hotbar-btn {
  background: #000033;
  color: #ccccdd;
  border: 1px solid #333366;
  font-family: 'Arial Black',sans-serif;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 7px;
  min-width: 24px;
  text-align: center;
  line-height: 1.4;
}
.hotbar-btn:hover { background: #000044; color: #ffcc00; }
.hotbar-btn.active { background: #003300; color: #00ff00; border-color: #00aa00; }
.hotbar-sep {
  width: 1px;
  height: 16px;
  background: #333366;
  margin: 0 3px;
  display: inline-block;
}
.hotbar-color-wrap { position: relative; display: inline-block; }
.hotbar-color-picker {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: #000033;
  border: 2px solid #333366;
  padding: 4px;
  width: 140px;
  flex-wrap: wrap;
  gap: 2px;
}
.hotbar-color-picker.show { display: flex; }
.hotbar-color-swatch {
  width: 20px;
  height: 20px;
  border: 1px solid #333366;
  cursor: pointer;
}
.hotbar-color-swatch:hover { border-color: #ffcc00; }

/* smile/frown reaction buttons: one size for both. The two glyphs otherwise come from
   different fallback fonts (or a colour emoji on phones), and the 3px "voted" border made
   a button grow when clicked, so the box is fixed and the glyph gets a fixed square. */
button[title="smile"], button[title="frown"] {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:.35em;
  height:calc(1.4em + 10px); padding-top:0 !important; padding-bottom:0 !important;
  line-height:1; vertical-align:middle; white-space:nowrap;
}
button[title="smile"] > span:first-child, button[title="frown"] > span:first-child {
  display:inline-block; width:1em !important; height:1em; line-height:1; text-align:center; font-size:1.4em !important;
  font-family:"Segoe UI Symbol","DejaVu Sans","Noto Sans Symbols","Symbola",sans-serif; font-variant-emoji:text;
}
/* the voted state is a 3px border; draw the extra 2px inside so the button doesn't grow */
button[title="smile"][style*="3px solid"], button[title="frown"][style*="3px solid"] {
  border-width:1px !important; box-shadow:inset 0 0 0 2px currentColor;
}

/* ── Readability pass (2026-10-28): bigger type and stronger contrast, same 2000s layout ── */
body { font-size: 14px; line-height: 1.4; }
/* <font size=1> is 10px and size=2 is 13px in browsers; lift them to readable sizes */
#site-content font[size="1"], #site-sidebar font[size="1"], #site-footer font[size="1"] { font-size: 13px; }
#site-content font[size="2"] { font-size: 15px; }
#site-header font[size="1"] { font-size: 12px; }
body:not(.game-page) #site-content [style*="font-size:9px"], body:not(.game-page) #site-content [style*="font-size: 9px"],
body:not(.game-page) #site-content [style*="font-size:10px"], body:not(.game-page) #site-content [style*="font-size: 10px"],
#site-sidebar [style*="font-size:10px"] { font-size: 12px !important; }
body:not(.game-page) #site-content [style*="font-size:11px"], body:not(.game-page) #site-content [style*="font-size: 11px"] { font-size: 13px !important; }
.sidebar-hdr { font-size: 13px; letter-spacing: .5px; }
.sectionhdr { font-size: 15px; }
.counter { font-size: 15px; }
.muted { font-size: 12px; color: #9090b8; }
.online, .offline, .warn { font-size: 12px; }
.entry-title { font-size: 16px; }
.site-sub { font-size: 13px; }
.flash-error, .flash-success { font-size: 14px; }
.auth-box td, .auth-box input[type="text"], .auth-box input[type="email"], .auth-box input[type="password"] { font-size: 14px; }
.auth-box input[type="submit"] { font-size: 14px; }
.auth-note { font-size: 12px; }
.profile-row td:first-child { font-size: 13px; }
.hotbar-btn { font-size: 12px; }
.notif-badge { font-size: 11px; }
/* old greys were ~3.5:1 on navy; these pass 4.5:1 (holiday themes recolour them in holiday.css) */
font[color="#666688" i], font[color="#777799" i],
[style*="color:#666688" i], [style*="color: #666688" i], [style*="color:#777799" i], [style*="color: #777799" i] { color: #9090b8 !important; }

/* top ticker (was <marquee>, which starts empty): text is on screen from the first frame */
.site-ticker {
  overflow: hidden; white-space: nowrap; background-color: #000011; color: #ffcc00;
  border: 2px solid #333366; padding: 10px 0; font: bold 15px/20px Arial, Helvetica, sans-serif; margin: 0 6px;
  position: relative; height: 20px;
}
/* absolutely placed so the long strip never widens the fixed header table */
.site-ticker-track { position: absolute; left: 0; top: 10px; display: block; white-space: nowrap; animation: site-ticker 40s linear infinite; }
.site-ticker:hover .site-ticker-track { animation-play-state: paused; }
@keyframes site-ticker { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) { .site-ticker-track { animation: none; } }

/* nav: bigger labels, current page shown as a pushed-in button */
.nav-btn { font-size: 13px; padding: 6px 0; }
.nav-btn.active { background: #ffcc00; color: #000033 !important; border: 2px inset #ffcc00; padding: 4px 0; }
.nav-btn.active:hover { color: #000033 !important; }
.dropdown-item { font-size: 14px; padding: 9px 10px; font-family: Verdana, Arial, sans-serif; font-weight: bold; }
.more-dropdown { min-width: 150px; }

/* "You are here" line */
#site-crumbs .crumbs { padding: 6px 10px; font: 13px Verdana, Arial, sans-serif; color: #9999bb; border-bottom: 1px solid #333366; }
#site-crumbs .crumb-here { color: #ffcc00; }

/* left MENU: small group headers, current page marked */
.side-menu td { font-size: 14px; line-height: 1.5; }
.menu-group { font: bold 11px Verdana, Arial, sans-serif; color: #6699ff; letter-spacing: 1px; margin: 6px 0 1px 4px; text-transform: uppercase; }
.side-menu a.menu-here { color: #ffcc00; font-weight: bold; text-decoration: none; }
.side-menu a.menu-here::before { content: "\00bb\00a0"; }
#site-sidebar { font-size: 13px; }

/* homepage */
.welcome-text { font-size: 16px !important; }
.start-here { padding: 4px 6px 12px; }
.start-btn {
  display: inline-block; font: bold 12px Arial, Helvetica, sans-serif; color: #000033 !important; background: #33cc66;
  border: 2px outset #33cc66; padding: 6px 10px; margin: 3px 2px; text-decoration: none !important; box-sizing: border-box;
}
.start-btn:hover { background: #55ee88; border-color: #55ee88; }
.start-btn:active { border-style: inset; }
.start-btn-alt { background: #ccccdd; border-color: #ccccdd; }
.start-btn-alt:hover { background: #eeeeff; border-color: #eeeeff; }
.news-list b font, .news-list b { font-size: 14px; }
#site-content .news-body { font-size: 15px; line-height: 1.5; }
.recent-posts td { padding-top: 6px; padding-bottom: 6px; }
.dl-teaser { line-height: 1.6; }

/* site map */
.sitemap td { font-size: 15px; line-height: 1.6; }
.sitemap ul { margin: 4px 0 12px 0; padding-left: 22px; list-style: square; }
.sitemap ul ul { margin: 2px 0 4px; list-style: circle; font-size: 14px; }
.sitemap-hdr { font: bold 14px "Arial Black", sans-serif; color: #ffcc00; }

.back-to-top { font-size: 13px; font-weight: bold; display: inline-block; margin-bottom: 6px; }

@media (max-width: 700px) {
  .site-ticker { font-size: 13px; margin: 0 3px; padding: 8px 0; height: 18px; line-height: 18px; }
  .site-ticker-track { top: 8px; }
  /* tap targets at least 40px tall */
  #site-nav .nav-btn, #site-nav .more-nav-wrapper .nav-btn { min-height: 40px; box-sizing: border-box; padding: 12px 3px; font-size: 14px; }
  #site-nav .nav-btn.active { padding: 10px 3px; }
  .dropdown-item { min-height: 44px; box-sizing: border-box; padding: 13px 12px; font-size: 15px; }
  .more-dropdown, .user-dropdown { min-width: 170px; }
  #site-crumbs, #site-crumbs tbody, #site-crumbs tr, #site-crumbs td { display: block; width: auto !important; }
  #site-sidebar .side-menu a { display: inline-block; min-height: 40px; line-height: 40px; padding: 0 !important; font-size: 16px; }
  .side-menu td img[src*="bullet"] { vertical-align: middle; }
  .menu-group { margin-top: 8px; font-size: 12px; }
  #site-sidebar > br, #site-sidebar > table + br { display: none; }
  #site-sidebar > table { margin-bottom: 8px; }
  #site-sidebar font a { padding-top: 4px !important; padding-bottom: 4px !important; }
  /* homepage tables fit the phone instead of scrolling sideways */
  #site-content .mobile-table-scroll > table.fit-table { min-width: 0; table-layout: fixed; }
  #site-content table.recent-posts > tbody > tr > td:first-child { width: 48% !important; }
  .start-btn { display: block; margin: 4px 0; text-align: center; padding: 7px 10px; }
  .welcome-text { font-size: 15px !important; }
}
@media (max-width: 480px) {
  .recent-posts .col-replies { display: none; }
}