/* ════════════════════════════════════════════════════════════════════════════
 * memeployed — shared 4chan "Yotsuba" imageboard theme.
 * One source of truth for the board look: palette, fonts, post/reply cards,
 * greentext, board nav, banner, oldschool forms + tables. Every page links this.
 * Branding/aesthetics only — page logic & functional hooks are untouched.
 * ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ffe:       #ffffee;  /* page background (the iconic 4chan cream)            */
  --post:      #f0e0d6;  /* reply/post box background (peach)                   */
  --post-op:   #f8ece4;  /* OP / highlighted post                              */
  --border:    #d9bfb7;  /* post borders, <hr>, table rules                    */
  --maroon:    #800000;  /* board title + section headers                      */
  --name:      #117743;  /* poster name (green "Anonymous")                    */
  --subject:   #0f0c5d;  /* subject line (bold navy)                           */
  --greentext: #789922;  /* >greentext quotes                                  */
  --link:      #0000ee;  /* links (blue)                                       */
  --link-hover:#dd0000;  /* link hover (red) — classic 4chan behaviour        */
  --text:      #000000;
  --muted:     #707070;
  --boardlist: #ffffee;
  --btn-face:  #ead9ce;
  --highlight: #fff19a;  /* yellow post-highlight (#hash / you)               */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ffe);
  color: var(--text);
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  line-height: 1.4;
  word-wrap: break-word;
}

body { position: relative; }  /* positioning context for page-bottom .mascot art */

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

hr {
  border: none;
  border-top: 1px solid var(--border);
  height: 0;
  margin: 8px 0;
  clear: both;
}

.mono { font-family: 'Courier New', monospace; }
.center { text-align: center; }
.clear { clear: both; }
.nowrap { white-space: nowrap; }

/* ── top / bottom board list ─────────────────────────────────────────────── */
.boardlist {
  background: var(--boardlist);
  border-bottom: 1px solid var(--border);
  padding: 3px 5px;
  font-size: 9pt;
  color: var(--muted);
}
.boardlist.bottom { border-bottom: none; border-top: 1px solid var(--border); margin-top: 30px; }
.boardlist a { color: var(--maroon); padding: 0 1px; }
.boardlist a:hover { color: var(--link-hover); }
.boardlist .sep { color: #b7c5d9; }
.boardlist .right { float: right; }
@media (max-width: 640px) { .boardlist .right { display: none; } }

/* ── banner + board title ────────────────────────────────────────────────── */
.banner {
  display: block;
  margin: 10px auto 4px;
  width: 300px;
  max-width: 90%;
  height: auto;
  border: 1px solid var(--maroon);
  image-rendering: auto;
}
/* transparent memes have no rectangle — drop the frame, treat as a logo cutout */
.banner.cutout {
  width: 140px;
  border: none;
}
/* official wordmark logo lockup in the header (replaces the old text board title) */
.brand { display: block; text-align: center; margin: 12px 0 2px; line-height: 0; }
.brandLogo { width: 320px; max-width: 84%; height: auto; }
@media (max-width: 560px) { .brandLogo { width: 240px; } }

.boardTitle {
  text-align: center;
  color: var(--maroon);
  font-family: Tahoma, Verdana, arial, sans-serif;
  font-weight: bold;
  font-size: 28pt;
  letter-spacing: -1px;
  line-height: 1;
  margin: 4px 0 0;
}
.boardSubtitle {
  text-align: center;
  color: var(--maroon);
  font-size: 9pt;
  font-style: italic;
  margin-bottom: 6px;
}

/* board sub-navigation row (Catalog / Settings / threads) */
.boardNav {
  text-align: center;
  font-size: 9pt;
  color: var(--muted);
  margin: 6px 0;
}
.boardNav a { color: var(--link); }

/* ── posts ───────────────────────────────────────────────────────────────── */
.board { max-width: 1100px; margin: 0 auto; padding: 0 6px 40px; }

.thread { margin: 0 0 6px; }

/* a free post container (OP) — full width, no peach box */
.opPost { padding: 4px 0 2px; }

/* a reply box (the peach card) */
.postReply,
.reply {
  display: block;
  position: relative;     /* anchor for .sticker cutouts */
  background: var(--post);
  border: 1px solid var(--border);
  border-left-color: #c0a89e;
  border-top-color: #c0a89e;
  padding: 4px 8px 8px;
  margin: 4px 0 4px 20px;
}
/* clearfix (instead of overflow:hidden) so floated cutouts can BLEED past the box */
.postReply::after, .reply::after, .opPost::after { content: ''; display: block; clear: both; }
.opPost { position: relative; }
.postReply.wide, .reply.wide { margin-left: 0; }
.postReply.highlight { background: var(--highlight); border-color: #e0c45a; }

/* post info line: name / subject / date / number */
.postInfo {
  font-size: 9pt;
  margin-bottom: 2px;
  color: var(--text);
}
.postInfo .subject { color: var(--subject); font-weight: bold; }
.postInfo .name { color: var(--name); font-weight: bold; }
.postInfo .trip { color: var(--name); }
.postInfo .dateTime { color: var(--text); }
.postInfo .postNum { color: var(--text); }
.postInfo .postNum a { color: var(--text); }
.postInfo .postNum a:hover { color: var(--link-hover); }
.postInfo .capcode { color: var(--maroon); font-weight: bold; }

/* file info + thumbnail */
.fileText { font-size: 9pt; color: var(--text); margin: 2px 0; }
.fileText a { color: var(--link); }
/* All meme art is transparent PNG — render borderless so cutouts sit straight on
   the cream board. Free placement helpers below let them bleed, overlap, and float. */
.postImg {
  float: left;
  margin: 4px 18px 6px 4px;
  border: none;
  background: transparent;
  max-width: 250px;
  height: auto;
  cursor: pointer;
}
.postImg.sm { max-width: 130px; }
.postImg.lg { max-width: 320px; }
.postImg.xl { max-width: 420px; }

/* float right instead of left */
.postImg.right, .float-r { float: right; margin: 4px 4px 6px 20px; }

/* ── "standing on the line" ──────────────────────────────────────────────────
   A small side meme is bottom-anchored so its feet rest on (and bleed slightly
   past) the panel's bottom border, like a character standing on the line.
   The post gets side padding so the text never runs under the cutout. */
.postReply:has(.postImg.sm:not(.right)),
.opPost:has(.postImg.sm:not(.right))   { padding-left: 124px; min-height: 114px; }
.postReply:has(.postImg.sm.right),
.opPost:has(.postImg.sm.right)         { padding-right: 124px; min-height: 114px; }

/* flush into the panel's bottom corner — image edges meet the panel edges */
.postReply .postImg.sm, .opPost .postImg.sm {
  position: absolute; top: auto; bottom: 0; margin: 0; max-width: 112px;
}
.postReply .postImg.sm:not(.right), .opPost .postImg.sm:not(.right) { left: 0; }
.postReply .postImg.sm.right,        .opPost .postImg.sm.right       { right: 0; }

/* on phones, fall back to a normal inline float (no big side padding) */
@media (max-width: 560px) {
  .postReply:has(.postImg.sm), .opPost:has(.postImg.sm) { padding-left: 8px; padding-right: 8px; min-height: 0; }
  .postReply .postImg.sm, .opPost .postImg.sm { position: static; float: left; bottom: auto; margin: 4px 12px 6px 0; }
}

/* bleed a cutout past the post edge so it overlaps the cream (uses transparency) */
.postImg.bleed-l { margin-left: -34px; margin-bottom: -8px; }
.postImg.bleed-r { margin-right: -34px; margin-bottom: -8px; }
.postImg.bleed-b { margin-bottom: -26px; }

/* a meme that overlaps a post's top-right corner like a sticker slapped on */
.sticker {
  position: absolute;
  width: 120px;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}
.sticker.tr { top: -26px; right: -18px; transform: rotate(7deg); }
.sticker.tl { top: -26px; left: -18px; transform: rotate(-7deg); }
.sticker.br { bottom: -20px; right: -10px; }

/* corner "mascots" — decorative characters that sit at the BOTTOM OF THE PAGE
   (absolute, not fixed) so they scroll away with the content instead of following
   the viewport. Pinned to the page bottom; body is position:relative below. */
.mascot {
  position: absolute;
  bottom: 30px;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  width: 170px;
}
.mascot.left  { left: 6px; }
.mascot.right { right: 6px; }
.mascot.sm { width: 140px; }
.mascot.tall { width: 160px; }
@media (max-width: 1100px) { .mascot { width: 120px; opacity: .85; } }
@media (max-width: 820px)  { .mascot { display: none; } }

/* faint watermark meme behind a section */
.watermark {
  position: absolute;
  opacity: .07;
  width: 360px;
  pointer-events: none;
  z-index: 0;
}

/* post body */
.postMessage {
  margin: 8px 12px 6px 24px;
  font-size: 10pt;
  line-height: 1.45;
}
.postMessage p { margin: 0 0 10px; }
.postMessage p:last-child { margin-bottom: 0; }
.quote, .greentext { color: var(--greentext); }
.orangetext { color: #ff4500; font-weight: bold; }
.pinktext { color: #e0727f; }
.quotelink, a.quotelink { color: var(--link); }
.quotelink:hover { color: var(--link-hover); }
.deadlink { color: var(--link); text-decoration: line-through; }
.postMessage .spoiler { background: #000; color: #000; padding: 0 1px; }
.postMessage .spoiler:hover { color: #fff; }

.replyButton { color: var(--text); }
.summary { color: var(--muted); font-size: 9pt; margin: 2px 0 6px 20px; }

/* ── oldschool form controls ─────────────────────────────────────────────── */
.replyForm {
  margin: 10px auto;
  border-collapse: collapse;
}
.postForm {
  background: var(--post);
  border: 1px solid var(--border);
  padding: 10px 12px;
  margin: 10px 0 10px 20px;
  max-width: 560px;
}
.postForm .row { display: flex; align-items: stretch; margin-bottom: 3px; }
.postForm .rowLabel {
  background: var(--maroon);
  color: #fff;
  font-size: 9pt;
  font-weight: bold;
  padding: 3px 6px;
  min-width: 70px;
  display: flex;
  align-items: center;
}
input[type=text], input[type=number], input[type=password], textarea, select {
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  border: 1px solid #aaa;
  background: #fff;
  color: #000;
  padding: 2px 4px;
  border-radius: 0;
}
.postForm input[type=text], .postForm input[type=number], .postForm textarea {
  flex: 1;
  border-left: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--maroon); }

/* the grey beveled imageboard button */
.oldbtn, button.oldbtn, input[type=submit].oldbtn {
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  color: #000;
  background: linear-gradient(#fbf5f0, var(--btn-face));
  border: 1px solid #9a8579;
  border-radius: 2px;
  padding: 3px 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
}
.oldbtn:hover { background: linear-gradient(#fff, #f3e6dc); color: var(--maroon); }
.oldbtn:active { background: var(--btn-face); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.oldbtn:disabled, .oldbtn[aria-disabled=true] { opacity: .5; cursor: default; color: var(--muted); }
.oldbtn.big { font-size: 12pt; font-weight: bold; padding: 6px 18px; }

/* ── tables (leaderboard / dashboard stats) ──────────────────────────────── */
table.ttable {
  border-collapse: collapse;
  width: 100%;
  font-size: 10pt;
  background: var(--ffe);
}
table.ttable th {
  background: var(--maroon);
  color: #fff;
  text-align: left;
  padding: 4px 8px;
  font-weight: bold;
  border: 1px solid var(--maroon);
}
table.ttable td {
  border: 1px solid var(--border);
  padding: 4px 8px;
}
table.ttable tr:nth-child(even) td { background: var(--post); }
table.ttable tr.you td { background: var(--highlight); }

/* a peach info/stat box */
.tbox {
  background: var(--post);
  border: 1px solid var(--border);
  border-left-color: #c0a89e;
  border-top-color: #c0a89e;
  padding: 8px 12px;
  margin: 8px 0;
}
.tbox h3 { margin: 0 0 6px; color: var(--maroon); font-size: 11pt; }
.statBig { font-size: 22pt; font-weight: bold; color: var(--maroon); line-height: 1; }
.statLabel { font-size: 9pt; color: var(--muted); }

/* small inline tag/pill ("Soon", "live") */
.tag {
  font-size: 8pt;
  font-weight: bold;
  color: #fff;
  background: var(--maroon);
  padding: 0 4px;
  border-radius: 2px;
  vertical-align: middle;
}
.tag.green { background: var(--name); }
.live { color: #008000; font-weight: bold; }
.live::before { content: '\25CF '; color: #008000; }

/* code/quote blocks for the "math" */
.codebox {
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-family: 'Courier New', monospace;
  font-size: 10pt;
  color: var(--text);
  white-space: pre-wrap;
  margin: 6px 0;
}

/* footer credit line */
.boardFooter {
  text-align: center;
  font-size: 8pt;
  color: var(--muted);
  margin-top: 16px;
  padding-top: 8px;
}
.boardFooter a { color: var(--maroon); }

/* responsive: drop thumbnails inline on phones */
@media (max-width: 560px) {
  .postReply, .reply { margin-left: 6px; }
  .postMessage { margin-left: 10px; }
  .postImg { max-width: 40vw; }
  .boardTitle { font-size: 20pt; }
  .postForm { margin-left: 0; }
}