/* Yotsuba B — the stock 4chan blue theme used on /pol/.
   Colors and metrics mirror 4chan's own stylesheet.
   System fonts only: zero font requests, zero layout shift. */

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

body {
  background: #eef2ff;
  color: #000;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  margin: 0;
  padding: 2px 4px 0;
  word-wrap: break-word;
}

/* Centered reading column. 4chan runs full-bleed, but a centered column
   reads better on wide screens and keeps the post near the eye line. */
.page {
  max-width: 760px;
  margin: 0 auto;
}

/* Posts sit centered in the column rather than hugging the left edge.
   .post stays display:table so it keeps the Yotsuba shrink-to-fit box. */
.postContainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.replyBanner,
.archiveStats,
.donateBox {
  margin-left: auto;
  margin-right: auto;
}

a {
  color: #34345c;
  text-decoration: none;
}
a:hover { color: #d00; }

hr {
  border: none;
  border-top: 1px solid #b7c5d9;
  height: 0;
  margin: 6px 0;
  clear: both;
}

img { border: 0; }

/* ---------- board nav ---------- */

.boardNav {
  font-size: 9pt;
  margin-bottom: 4px;
  line-height: 1.6;
}
.boardNav .nav-left { float: left; }
.boardNav .nav-right { float: right; }
.boardNav::after { content: ""; display: block; clear: both; }

.navLink.current {
  font-weight: 700;
  color: #d00;
}

/* ---------- board banner ---------- */

.boardBanner {
  text-align: center;
  clear: both;
  padding-top: 2px;
}

.boardTitle {
  font-family: Tahoma, arial, helvetica, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #af0a0f;
  letter-spacing: -2px;
  line-height: 1.1;
}

.boardSubtitle {
  font-size: 9pt;
  color: #000;
  margin-top: 2px;
}

/* ---------- stat line ---------- */

.statLine {
  text-align: center;
  font-size: 9pt;
  margin: 4px 0;
}
.statLine b { color: #000; }
.statLine .hot { color: #d00; font-weight: 700; }

/* ---------- posts ---------- */

.thread { clear: both; }

.postContainer {
  clear: both;
  margin: 4px 0;
}

.sideArrows {
  color: #b7c5d9;
  float: left;
  margin-right: 2px;
  margin-top: 0;
  padding-top: 2px;
  user-select: none;
}

/* The signature 4chan reply box: table display, no top/left border. */
.post.reply {
  display: table;
  background-color: #d6daf0;
  border: 1px solid #b7c5d9;
  border-left: none;
  border-top: none;
  padding: 2px;
  max-width: 100%;
}

.post.loading {
  display: block;
  min-height: 72px;
  position: relative;
}
.post.loading .postInfo,
.post.loading .postMessage,
.post.loading .file { visibility: hidden; }

.postLoading {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 9pt;
  color: #707070;
  text-align: center;
  padding: 0 10px;
}
.post.loading .postLoading { display: flex; }

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #b7c5d9;
  border-top-color: #af0a0f;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.postInfo {
  display: block;
  font-size: 10pt;
  line-height: 1.4;
}

.postInfo input { vertical-align: middle; margin: 0 2px 0 0; }

.nameBlock { display: inline; }

.name {
  color: #117743;
  font-weight: 700;
}

.subject {
  color: #0f0c5d;
  font-weight: 700;
}

.dateTime { color: #000; }

.postNum a { color: #000; }
.postNum a:hover { color: #d00; }

/* flag slot */
.flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  vertical-align: middle;
  margin: 0 2px;
  image-rendering: pixelated;
}
.flag.hidden-flag {
  background: repeating-linear-gradient(45deg, #b7c5d9, #b7c5d9 3px, #9fb0c6 3px, #9fb0c6 6px);
  border: 1px solid #8a9bb3;
  box-sizing: border-box;
}

blockquote.postMessage {
  margin: 8px 20px 12px 30px;
  padding: 0;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.postMessage .greentext { color: #789922; }
.postMessage .quotelink { color: #34345c; text-decoration: underline; }
.postMessage .quotelink:hover { color: #d00; }
.postMessage .deadlink { color: #34345c; text-decoration: underline line-through; }

.postMessage .spoiler {
  background: #000;
  color: #000;
  padding: 0 1px;
}
.postMessage .spoiler.shown { color: #fff; }

/* file / image */

.file {
  display: block;
  margin: 2px 0 2px 20px;
}

.fileText {
  font-size: 9pt;
  color: #000;
  display: block;
  margin-bottom: 2px;
}

.fileThumb {
  display: inline-block;
  max-width: 100%;
}

.fileThumb img {
  max-width: 250px;
  max-height: 250px;
  display: block;
  cursor: zoom-in;
}
.fileThumb img.expanded {
  max-width: 100%;
  max-height: none;
  cursor: zoom-out;
}

/* shake on a wrong guess */
.post.wrong { animation: nope .35s ease; }
@keyframes nope {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(4px); }
}

/* ---------- reply / result banner ---------- */

.replyBanner {
  clear: both;
  margin: 6px 0;
  padding: 4px 6px;
  background: #d6daf0;
  border: 1px solid #b7c5d9;
  border-left: none;
  border-top: none;
  display: table;
  max-width: 100%;
}

.replyBanner .verdict { font-weight: 700; }
.replyBanner .verdict.correct { color: #117743; }
.replyBanner .verdict.wrong { color: #af0a0f; }
.replyBanner .verdict.close { color: #b06a00; }
.replyBanner .answer { margin-left: 4px; }
.replyBanner img.answerFlag { vertical-align: middle; margin-right: 3px; image-rendering: pixelated; }
.replyBanner .actions { margin-top: 3px; font-size: 9pt; }

.errorBanner {
  clear: both;
  margin: 6px 0;
  padding: 4px 6px;
  background: #f8d8d8;
  border: 1px solid #d9a0a0;
  color: #8b0000;
  font-size: 9pt;
}

/* ---------- flag choice grid ---------- */

.choiceWrap {
  display: table;
  background: #d6daf0;
  border: 1px solid #b7c5d9;
  border-left: none;
  border-top: none;
  padding: 7px 9px 9px;
  margin: 8px auto 0;
  max-width: 100%;
}

.choiceHead {
  font-weight: 700;
  color: #117743;
  margin-bottom: 6px;
}

.choiceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.choiceBtn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 7px 6px;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
  text-align: left;
  cursor: pointer;
  min-height: 34px;
  line-height: 1.2;
  color: #000;
}

.choiceBtn img {
  width: 16px;
  height: 11px;
  flex: none;
  image-rendering: pixelated;
  border: 1px solid #ccc;
}

.choiceBtn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choiceBtn:hover:not(:disabled) { background: #eef2ff; border-color: #af0a0f; }
.choiceBtn:focus-visible { outline: 2px solid #af0a0f; outline-offset: 1px; }
.choiceBtn:active:not(:disabled) { transform: translateY(1px); }
.choiceBtn:disabled { cursor: default; opacity: .85; }

/* after answering */
.choiceBtn.isRight {
  background: #d8f0d8;
  border-color: #117743;
  border-width: 2px;
  font-weight: 700;
  opacity: 1;
}
.choiceBtn.isWrongPick {
  background: #f8d8d8;
  border-color: #af0a0f;
  border-width: 2px;
  opacity: 1;
}
.choiceBtn.faded { opacity: .4; }

.choiceActions { margin-top: 7px; text-align: center; }
.choiceActions button { margin: 0 3px; }

/* ---------- archive ---------- */

.archiveStats {
  display: table;
  background: #d6daf0;
  border: 1px solid #b7c5d9;
  border-left: none;
  border-top: none;
  padding: 4px 6px;
  margin: 4px 0 8px;
  font-size: 9pt;
  max-width: 100%;
}
.archiveStats .big { font-size: 12pt; font-weight: 700; color: #af0a0f; }
.archiveStats .row { margin-bottom: 3px; }
.archiveStats .row:last-child { margin-bottom: 0; }
.archiveStats .lbl { font-weight: 700; }
.archiveStats img { vertical-align: middle; image-rendering: pixelated; margin-right: 2px; }
.archiveStats .cty { white-space: nowrap; margin-right: 6px; display: inline-block; }

.archiveItem { cursor: pointer; }
.archiveItem .tag { font-weight: 700; }
.archiveItem .tag.correct { color: #117743; }
.archiveItem .tag.wrong { color: #af0a0f; }
.archiveItem .tag.close { color: #b06a00; }
.archiveItem .guessLine { font-size: 9pt; color: #707070; }
.archiveItem blockquote.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archiveItem.flash { outline: 2px solid #af0a0f; }

.centerBtn { text-align: center; margin: 8px 0; clear: both; }
.emptyNote { text-align: center; color: #707070; font-size: 9pt; margin: 12px 0; }

/* ---------- settings ---------- */

.settingsBox {
  display: table;
  background: #d6daf0;
  border: 1px solid #b7c5d9;
  border-left: none;
  border-top: none;
  padding: 8px 10px;
  margin: 6px auto 10px;
  max-width: 100%;
}

.settingsIntro { margin: 0 0 10px; line-height: 1.5; }

.setGroup {
  border: 1px solid #b7c5d9;
  margin: 0 0 10px;
  padding: 6px 10px 8px;
}
.setGroup legend { font-weight: 700; color: #117743; padding: 0 4px; }
.setGroup label { display: block; margin: 4px 0; cursor: pointer; line-height: 1.5; }
.setGroup input[type=radio] { margin-right: 5px; vertical-align: middle; }
.setGroup select { margin-left: 4px; font-family: inherit; font-size: inherit; }

.hint { color: #707070; font-size: 9pt; }
.setGroup p.hint { margin: 6px 0 0; }

.settingsSaved { color: #117743; font-weight: 700; margin: 0; }

.pts {
  font-weight: 700;
  color: #117743;
  margin-left: 6px;
}
.rateLine {
  font-size: 9pt;
  color: #707070;
  margin-top: 2px;
}

/* ---------- running list of your last answers ---------- */

.recentBox {
  display: table;
  background: #d6daf0;
  border: 1px solid #b7c5d9;
  border-left: none;
  border-top: none;
  padding: 5px 8px 6px;
  margin: 6px auto 0;
  max-width: 100%;
}

.recentHead {
  font-weight: 700;
  font-size: 9pt;
  color: #707070;
  margin-bottom: 3px;
}

.recentList {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 9pt;
  line-height: 1.6;
}

.recentList li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recentList li.fresh { animation: freshrow .5s ease; }
@keyframes freshrow {
  from { background: #fff6b0; }
  to   { background: transparent; }
}

.recentList img {
  vertical-align: middle;
  image-rendering: pixelated;
  margin-right: 3px;
}

.recentList .rc { font-weight: 700; }
.recentList .rg { color: #707070; }
.recentList .rt { font-weight: 700; }
.recentList .rt.correct { color: #117743; }
.recentList .rt.wrong { color: #af0a0f; }
.recentList .rt.close { color: #b06a00; }

.autoNote {
  color: #117743;
  font-style: italic;
  margin-left: 6px;
}

/* ---------- archive scope toggle ---------- */

.scopeBar {
  text-align: center;
  font-size: 9pt;
  margin: 2px 0 6px;
}
.scopeLink.current { font-weight: 700; color: #d00; }

/* ---------- donate ---------- */

.donateBox {
  display: table;
  background: #d6daf0;
  border: 1px solid #b7c5d9;
  border-left: none;
  border-top: none;
  padding: 8px 10px;
  margin: 6px auto 10px;
  max-width: 100%;
}

.donateIntro { margin: 0 0 10px; line-height: 1.5; }
.donateNote { margin: 10px 0 0; font-size: 9pt; color: #707070; line-height: 1.5; }

.coin { margin-bottom: 10px; }
.coin:last-of-type { margin-bottom: 0; }

.coinName { font-weight: 700; color: #117743; margin-bottom: 2px; }

.addr {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 9pt;
  background: #fff;
  border: 1px solid #aaa;
  padding: 5px 6px;
  cursor: pointer;
  word-break: break-all;
  line-height: 1.45;
  user-select: all;
}
.addr:hover { background: #fffbe6; border-color: #af0a0f; }
.addr:focus { outline: 2px solid #af0a0f; }

.copied {
  font-size: 9pt;
  color: #117743;
  font-weight: 700;
  margin-left: 2px;
}

/* ---------- footer ---------- */

.pgFooter {
  clear: both;
  text-align: center;
  font-size: 9pt;
  color: #707070;
  margin: 10px 0 14px;
  line-height: 1.5;
}

[hidden] { display: none !important; }

/* ---------- phones ----------
   4chan's own layout already reflows; we only enlarge tap targets and
   dock the guess form so it stays reachable with a thumb. */

@media (max-width: 640px) {
  body { font-size: 11pt; }

  .boardTitle { font-size: 24px; }

  blockquote.postMessage { margin: 8px 8px 10px 16px; }

  .file { margin-left: 8px; }
  .fileThumb img { max-width: 100%; max-height: 300px; }

  .post.reply { display: block; flex: 1; min-width: 0; }
  .replyBanner, .archiveStats, .donateBox, .recentBox, .settingsBox,
  .choiceWrap { display: block; }
  .postContainer { align-items: stretch; }

  /* Two columns on phones so each flag stays a comfortable tap target. */
  .choiceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .choiceBtn { min-height: 44px; font-size: 10pt; padding: 8px 7px; }
  .choiceActions button { padding: 9px 16px; font-size: 11pt; }


  button { padding: 7px 12px; font-size: 11pt; }
}