/* Cool Jaymes Games - lovingly recreated 2007 Coolmath chaos */

* { box-sizing: border-box; }

body {
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
  padding: 0 0 40px;
}

a { color: #4af; text-decoration: underline; }
a:hover { color: #fff; background: #003; }

.red    { color: #f00; }
.yellow { color: #ff0; }
.green  { color: #0f0; }
.small  { font-size: 11px; font-weight: normal; }
.big    { font-size: 20px; }

.page { width: 100%; max-width: 800px; margin: 0 auto; padding: 6px 10px 0; }

/* brand row */
.brandbar {
  text-align: center; padding: 6px 0; font-size: 30px;
  letter-spacing: -1px; white-space: nowrap;
}
.tri { color: #0f0; font-size: 26px; vertical-align: middle; }
.brand-coolj { color: #f00; text-shadow: 1px 1px 0 #fff; }
.brand-kids  { color: #f00; }
.brand-jaymes { color: #ff0; }

/* nav bars */
.navbar {
  border-top: 2px solid #f00; border-bottom: 2px solid #f00;
  padding: 3px 6px; font-size: 13px; text-align: center;
}
.navbar2 { border-top: none; }
.navbar a { margin: 0 6px; }
.nav-red   { color: #f00; margin: 0 6px; }
.nav-green { color: #0f0; margin: 0 6px; }
.nav-greenlink { color: #0f0; }
.nav-box { border: 2px solid #fff; padding: 1px 8px; color: #fff; margin: 0 6px; text-decoration: none; }

/* generic colored boxes */
.box-red   { border: 4px solid #f00; margin: 8px 0; padding: 10px; }
.box-green { border: 4px solid #0f0; margin: 8px 0; padding: 8px; }

/* welcome blurb */
.blurb { text-align: center; }
.blurb-cols { display: flex; justify-content: space-around; margin-top: 8px; gap: 10px; }
.blurb-cols > div { flex: 1; font-size: 13px; }

/* big logo */
.logo-box { text-align: center; padding: 14px; }
.planet { display: inline-block; vertical-align: middle; }
.logo-text {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 54px; font-style: italic; color: #f00;
  vertical-align: middle; margin-left: -10px;
  text-shadow:
     2px 2px 0 #ff0, 3px 3px 0 #ff0,
     4px 4px 0 #900, 5px 5px 0 #900, 6px 6px 4px #000;
}

/* section banners */
.section-banner { text-align: center; font-size: 20px; }
.banner-link { font-size: 20px; }

/* fullscreen button (added by js/fullscreen.js) */
.fs-btn-inline, .fs-btn-float {
  font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;
  color: #0f0; background: #000; border: 2px solid #ff0;
  padding: 3px 12px; cursor: pointer;
}
.fs-btn-inline { margin-left: 18px; vertical-align: middle; }
.fs-btn-float { position: fixed; top: 8px; right: 8px; z-index: 9999; }
.fs-btn-inline:hover, .fs-btn-float:hover { background: #002200; color: #fff; }
/* when an embed/canvas is fullscreened, fill the screen on black */
:fullscreen { width: 100vw; height: 100vh; background: #000; border: 0 !important; }
:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; }
:fullscreen canvas { max-width: 100vw; max-height: 100vh; }

/* layout */
.layout { display: flex; gap: 10px; align-items: flex-start; }
.content { flex: 1; min-width: 0; }
.sidebar { width: 150px; flex: none; text-align: center; }

/* thumbnails box */
.thumbs-box { text-align: center; }
.thumbs-title { font-size: 18px; }
.subtitle { font-size: 12px; margin-bottom: 8px; }
.thumb-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.thumb-card { width: 130px; text-align: center; }
.thumb-card img, .thumb-card .thumb-ph {
  width: 120px; height: 90px; border: 3px solid #00f; display: block; margin: 0 auto 4px;
  object-fit: cover;
}
.thumb-card .caption { font-size: 12px; display: block; }
.thumb-card .desc { font-size: 10px; font-weight: normal; color: #aaa; }

/* tables of links by category */
.tables-box { text-align: center; }
.tables-title { font-size: 17px; margin-bottom: 6px; }
.cat-block { margin: 10px 0; }
.cat-head {
  color: #ff0; font-size: 15px; padding: 4px;
  border: 2px solid #0f0; margin-bottom: 4px;
}
table.link-table { width: 100%; border-collapse: collapse; }
table.link-table td {
  border: 1px solid #ff0; padding: 6px 4px; width: 25%;
  text-align: center; font-size: 14px; height: 30px;
}
table.link-table td.empty { border-color: #ff0; }

.more-line { text-align: center; font-size: 14px; margin: 12px 0; }

/* fake joke ads */
.ad-label { color: #888; font-size: 11px; font-weight: normal; }
.joke-ad {
  display: block; text-decoration: none;
  border: 2px solid #fff; padding: 8px 6px; margin: 6px 0; text-align: center;
}
.joke-ad:hover { text-decoration: none; filter: brightness(1.12); }
.joke-ad-img {
  display: block; width: 100%; height: auto; margin: 0 auto 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.joke-ad-title { font-size: 14px; margin-bottom: 5px; text-shadow: 1px 1px 0 #000; }
.joke-ad-body { font-size: 11px; font-weight: normal; line-height: 1.3; margin-bottom: 7px; text-shadow: 1px 1px 2px #000; }
.joke-ad-cta {
  display: inline-block; color: #fff; font-size: 11px; padding: 3px 8px;
  border: 1px solid #fff; cursor: pointer; text-shadow: 1px 1px 0 #000;
}
.joke-ad-cta:hover { filter: brightness(1.3); }
@keyframes blinker { 50% { opacity: 0.25; } }
.joke-ad.blink .joke-ad-title { animation: blinker 1s step-start infinite; }

/* rotating leaderboard banners (top + bottom) */
.banner-label { text-align: center; margin-top: 8px; }
.banner-ad { transition: opacity 0.35s; opacity: 1; margin: 2px 0 6px; }
.banner-inner {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  border: 3px solid #fff; padding: 8px 14px; min-height: 70px;
}
.banner-inner:hover { text-decoration: none; filter: brightness(1.1); }
.banner-title {
  font-size: 18px; white-space: nowrap; text-shadow: 1px 1px 0 #000;
}
.banner-body {
  flex: 1; font-size: 13px; font-weight: normal; text-align: left; line-height: 1.25;
  text-shadow: 1px 1px 2px #000;
}
.banner-cta {
  flex: none; color: #fff; font-size: 13px; padding: 6px 14px;
  border: 1px solid #fff; white-space: nowrap; cursor: pointer; text-shadow: 1px 1px 0 #000;
}
.banner-cta:hover { filter: brightness(1.3); }
.banner-inner.blink .banner-title { animation: blinker 1s step-start infinite; }

/* support + footer */
.support { text-align: center; font-size: 13px; }
.footer { text-align: center; margin-top: 16px; font-size: 12px; }
.footer-help { color: #0f0; font-size: 16px; margin-bottom: 6px; }
.footer-links { margin-bottom: 10px; }
.footer-links a { margin: 0 2px; }
.footer-thanks { font-size: 12px; margin-top: 8px; }

/* keep media/embeds from overflowing their container at any width */
img, iframe, canvas, svg, table { max-width: 100%; }

/* ---- tablets ---- */
@media (max-width: 820px) {
  .brandbar { font-size: 24px; }
  .logo-text { font-size: 40px; }
  .navbar { font-size: 12px; }
}

/* ---- phones ---- */
@media (max-width: 560px) {
  body { padding-bottom: 24px; }

  .brandbar { font-size: 18px; letter-spacing: 0; }
  .tri { font-size: 15px; }

  .logo-box { padding: 10px 4px; }
  .logo-text { font-size: 30px; margin-left: 0; }
  .planet svg { width: 84px; height: 49px; }

  /* let the nav wrap instead of running off the edge */
  .navbar { font-size: 11px; white-space: normal; line-height: 1.9; }
  .navbar a, .nav-red, .nav-green { margin: 0 4px; }

  .section-banner, .banner-link, .thumbs-title, .tables-title { font-size: 15px; }

  /* stack the two-column layout: content over sidebar */
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }

  /* stack the welcome blurb columns */
  .blurb-cols { flex-direction: column; gap: 6px; }

  /* link tables: one tappable link per row instead of a cramped 4-wide grid */
  table.link-table, table.link-table tbody, table.link-table tr { display: block; width: 100%; }
  table.link-table td { display: block; width: 100%; height: auto; padding: 9px 6px; }
  table.link-table td.empty { display: none; }

  /* banners wrap instead of overflowing */
  .banner-inner { flex-wrap: wrap; gap: 6px; min-height: 0; padding: 8px 10px; }
  .banner-title { white-space: normal; }
  .banner-body { flex-basis: 100%; }
}