:root {
  --mona-pop: "Mochiy Pop One", "M PLUS Rounded 1c", "Yu Gothic UI", Meiryo, sans-serif;
  --mona-round: "M PLUS Rounded 1c", "Yu Gothic UI", Meiryo, sans-serif;
  --mona-ink: #432d28;
  --mona-red: #e45f5a;
  --mona-red-deep: #a23f43;
  --mona-yellow: #f2bd4f;
  --mona-cream: #fff7e7;
  --mona-pink: #ffe3dc;
  --mona-mint: #dff2dc;
  --mona-line: rgba(79, 48, 40, .18);
}

html body {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  color: var(--mona-ink);
  background-color: #fffaf0;
  font-family: var(--mona-round);
  font-size: 16px;
}

body > main,
body > #root { width: 100%; flex: 1 0 auto; }
body > footer { flex: 0 0 auto; }

body :is(h1, h2, h3, .brand b) {
  font-family: var(--mona-pop);
  font-weight: 400;
  letter-spacing: .015em;
}

body :is(.eyebrow, [class*="kicker"], [class*="overline"]) {
  font-family: var(--mona-round);
  font-weight: 800;
  letter-spacing: .12em;
}

body :is(
  .site-header,
  .terms-header,
  .news-header,
  .gallery-header,
  .ranking-header,
  .punishment-header,
  .player-header,
  .vote-header,
  .community-header,
  .wiki-header,
  .maker-header,
  .tool-header,
  .app-header
) {
  color: var(--mona-ink);
  border-bottom: 3px solid var(--mona-yellow);
  background: rgba(255, 250, 240, .96);
  box-shadow: 0 5px 0 rgba(228, 95, 90, .16);
  backdrop-filter: blur(18px);
}

body header .brand img {
  padding: 3px;
  border: 2px solid var(--mona-yellow);
  border-radius: 14px;
  background: #fff;
  filter: none;
}

body header .brand b { color: var(--mona-red-deep); font-size: 17px; }
body header .brand small { color: #aa6b52; font-size: 9px; font-weight: 800; }

body header nav a,
body #site-nav a {
  padding: 10px 13px;
  color: #684f47;
  border-radius: 999px;
  font-family: var(--mona-round);
  font-size: 13px;
  font-weight: 800;
}

body header nav a:hover,
body #site-nav a:hover { color: var(--mona-red-deep); background: var(--mona-pink); }
body header nav a.current,
body header nav a[aria-current="page"],
body #site-nav a.current { color: #5d302d; background: var(--mona-pink); box-shadow: inset 0 0 0 2px var(--mona-red); }
body #site-nav .nav-join { color: var(--mona-ink); background: var(--mona-yellow); }

body :is(
  .terms-hero,
  .news-hero,
  .gallery-hero,
  .ranking-hero,
  .punishment-hero,
  .player-hero,
  .vote-hero,
  .community-hero,
  .wiki-hero,
  .maker-hero,
  .tool-hero
) {
  color: var(--mona-ink);
  background-color: var(--mona-cream);
  background-image:
    radial-gradient(circle at 88% 28%, rgba(242, 189, 79, .42) 0 13%, transparent 13.4%),
    radial-gradient(circle at 78% 74%, rgba(228, 95, 90, .18) 0 20%, transparent 20.4%),
    linear-gradient(135deg, #fffaf0 0%, #ffe8d7 56%, #fff2c8 100%);
}

body :is(
  .terms-hero,
  .news-hero,
  .gallery-hero,
  .ranking-hero,
  .punishment-hero,
  .player-hero,
  .vote-hero,
  .community-hero,
  .wiki-hero
) h1,
body .hero h1 {
  color: var(--mona-ink);
  font-family: var(--mona-pop);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.45;
}

body :is(
  .terms-hero,
  .news-hero,
  .gallery-hero,
  .ranking-hero,
  .punishment-hero,
  .player-hero,
  .vote-hero,
  .community-hero,
  .wiki-hero
) h1 em,
body .hero h1 em { color: var(--mona-red); }

body .eyebrow { color: var(--mona-red-deep); font-size: 12px; }

body :is(
  .guide-content,
  .guide-toc,
  .terms-document,
  .news-article,
  .vote-card,
  .wiki-card,
  .community-card,
  .ranking-panel,
  .punishment-panel
) {
  border-color: var(--mona-line);
  border-radius: 24px;
  background-color: rgba(255, 253, 247, .98);
  box-shadow: 0 12px 0 rgba(242, 189, 79, .18), 0 24px 60px rgba(83, 49, 37, .08);
}

body :is(
  .card-grid article,
  .step-list article,
  .lead-card,
  .guide-note,
  .news-card,
  .gallery-card,
  .stat-strip,
  .command-list > p
) { border-radius: 17px; }

body .guide-content h2 { color: var(--mona-red-deep); }
body .guide-content p { color: #5f4941; font-size: 14px; line-height: 1.95; }
body .guide-toc nav a { min-height: 34px; align-content: center; font-size: 13px; }
body .section-kicker span { background: var(--mona-red); }
body .guide-note { border-left-color: var(--mona-yellow); background: #fff3cb; }

/* Pop, readable global navigation overlay. */
.public-sidebar {
  top: 50%;
  bottom: auto;
  width: min(980px, calc(100vw - 40px));
  max-height: min(84vh, 760px);
  padding: 24px;
  color: var(--mona-ink);
  border: 3px solid var(--mona-ink);
  border-radius: 28px;
  background: var(--mona-cream);
  box-shadow: 13px 13px 0 var(--mona-red);
  font-family: var(--mona-round);
  transform: translate(-50%, calc(-50% + 30px)) scale(.98);
}

.public-sidebar.open { transform: translate(-50%, -50%) scale(1); }
.public-sidebar::before {
  margin: 0 0 17px;
  color: var(--mona-red-deep);
  content: "もなか鯖メニュー  /  ページを選ぶ";
  font: 400 18px/1.5 var(--mona-pop);
  letter-spacing: .03em;
}

.public-sidebar-search {
  max-width: none;
  margin-bottom: 18px;
  padding: 12px 15px;
  color: #866b61;
  border: 2px solid var(--mona-line);
  border-radius: 14px;
  background: #fff;
}
.public-sidebar-search input { color: var(--mona-ink); font: 700 14px var(--mona-round); }
.public-sidebar-search input::placeholder { color: #9a8378; }

.public-sidebar nav {
  display: block;
  columns: 3 245px;
  column-gap: 16px;
  padding: 0;
  border: 0;
}

.public-sidebar section {
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
  padding: 15px;
  break-inside: avoid;
  border: 2px solid var(--mona-line);
  border-radius: 18px;
  background: #fff;
}
.public-sidebar h2 { margin: 0 5px 9px; color: var(--mona-red-deep); font: 400 13px var(--mona-pop); letter-spacing: .04em; }
.public-sidebar a { min-height: 42px; gap: 9px; padding: 8px 9px; color: #57413a; border: 0; border-radius: 12px; font-size: 14px; }
.public-sidebar a:hover { color: var(--mona-red-deep); border: 0; background: var(--mona-pink); transform: translateX(3px); }
.public-sidebar a.current { color: var(--mona-ink); background: var(--mona-yellow); box-shadow: none; }
.public-sidebar a > .material-symbols-rounded { width: 27px; height: 27px; color: var(--mona-red); font-size: 20px; }
.public-sidebar a:hover > .material-symbols-rounded,
.public-sidebar a.current > .material-symbols-rounded { color: var(--mona-red-deep); }

.public-sidebar-toggle,
.public-rail-toggle {
  min-height: 50px;
  padding: 11px 18px;
  color: var(--mona-ink);
  border: 2px solid var(--mona-ink);
  border-radius: 15px;
  background: var(--mona-yellow);
  box-shadow: 5px 5px 0 var(--mona-red);
  font: 800 14px var(--mona-round);
}

.public-sidebar-backdrop,
.public-rail-backdrop { background: rgba(52, 34, 29, .58); }

/* Readable server information modal. */
.public-rail {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(840px, calc(100vw - 40px));
  max-height: min(84vh, 740px);
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  padding: 24px;
  color: var(--mona-ink);
  border: 3px solid var(--mona-ink);
  border-radius: 28px;
  background: var(--mona-cream);
  box-shadow: 13px 13px 0 var(--mona-red);
  transform: translate(-50%, calc(-50% + 30px));
}
.public-rail.open { transform: translate(-50%, -50%); }
.public-rail::before { display: none; }
.public-rail-card { border: 2px solid var(--mona-line); border-radius: 18px; background: #fff; }
.public-rail-card:last-child { border: 2px solid var(--mona-line); }
.public-rail-card h2 { padding: 17px 18px; color: var(--mona-red-deep); border-bottom: 2px solid var(--mona-line); font: 400 18px var(--mona-pop); }
.public-rail-body { gap: 7px; padding: 18px; }
.public-rail-body small { color: #886e63; font: 800 11px var(--mona-round); }
.public-rail-body code { padding: 7px 10px; color: var(--mona-ink); border-radius: 8px; background: var(--mona-yellow); font: 800 13px var(--mona-round); }
.public-rail-body strong,
.public-rail-body p { color: #4e3932; font-size: 13px; }
.public-rail-social,
.public-rail-more { color: var(--mona-red-deep); font-size: 12px; }
.public-online-pill { padding: 6px 10px; border-radius: 9px; font-size: 12px; }
.public-online-pill.online { color: #285d3d; background: var(--mona-mint); }
.public-rail-news-list { padding: 8px 18px; }
.public-rail-news-item { padding: 11px 0; color: #4e3932; border-bottom-color: var(--mona-line); }
.public-rail-news-item strong { font-size: 13px; line-height: 1.65; }
.public-rail-news-item time { color: #967c70; font: 700 10px var(--mona-round); }

@media (max-width: 860px) {
  .public-sidebar nav { columns: 2 220px; }
  .public-rail { grid-template-columns: 1fr; }
  .public-rail-card { border-right: 2px solid var(--mona-line); }
}

@media (max-width: 560px) {
  html body { font-size: 15px; }
  .public-sidebar,
  .public-rail { top: 50%; right: auto; bottom: auto; left: 50%; width: calc(100vw - 20px); max-height: calc(100dvh - 24px); padding: 15px; border-radius: 21px; box-shadow: 7px 7px 0 var(--mona-red); }
  .public-sidebar nav { columns: 1; }
  .public-sidebar section { padding: 12px; }
  .public-sidebar::before { font-size: 15px; }
  .public-sidebar-toggle,
  .public-rail-toggle { min-height: 45px; padding: 9px 13px; border-radius: 12px; font-size: 12px; }
  body header .brand b { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   VOTE QUEST THEME / all public pages
   The vote page is the visual source of truth: sky + yellow, heavy outlines,
   red actions and friendly dimensional cards.
   -------------------------------------------------------------------------- */

:root {
  --mona-ink: #34271f;
  --mona-red: #e7524d;
  --mona-red-deep: #c8403e;
  --mona-yellow: #ffc84c;
  --mona-cream: #fff8e8;
  --mona-pink: #ffe0dc;
  --mona-mint: #bde9c8;
  --mona-blue: #bde5f5;
  --mona-line: rgba(52, 39, 31, .32);
  --vote-card-shadow: 8px 8px 0 rgba(52, 39, 31, .14);
}

html body {
  color: var(--mona-ink);
  background:
    radial-gradient(circle at 10% 18%, rgba(189,229,245,.38), transparent 22%),
    #fff8e8;
}

body :is(
  .site-header,.terms-header,.news-header,.gallery-header,.ranking-header,
  .punishment-header,.player-header,.vote-header,.community-header,.wiki-header,
  .maker-header,.tool-header,.app-header,.topbar
) {
  border-bottom: 3px solid var(--mona-yellow);
  background: rgba(255, 250, 240, .97);
  box-shadow: 0 5px 0 rgba(231,82,77,.16);
}

body header nav a.current,
body header nav a[aria-current="page"],
body #site-nav a.current,
body .board-nav a.current {
  color: #fff;
  border: 2px solid var(--mona-ink);
  background: var(--mona-red);
  box-shadow: 3px 3px 0 var(--mona-ink);
}

body :is(
  .hero,.terms-hero,.news-hero,.gallery-hero,.ranking-hero,.punishment-hero,
  .player-hero,.vote-hero,.community-hero,.wiki-hero,.maker-hero,.tool-hero,
  .guide-hero
) {
  color: var(--mona-ink);
  background-color: var(--mona-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(135deg, var(--mona-blue) 0 51%, #ffe27f 51% 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

body :is(
  .hero,.terms-hero,.news-hero,.gallery-hero,.ranking-hero,.punishment-hero,
  .player-hero,.vote-hero,.community-hero,.wiki-hero,.maker-hero,.tool-hero
) h1 {
  color: var(--mona-ink);
  text-shadow: 3px 3px 0 rgba(255,255,255,.68);
}

body :is(
  .hero,.terms-hero,.news-hero,.gallery-hero,.ranking-hero,.punishment-hero,
  .player-hero,.vote-hero,.community-hero,.wiki-hero,.maker-hero,.tool-hero
) h1 :is(em,strong),
body :is(.hero,.terms-hero,.news-hero,.gallery-hero,.ranking-hero,.punishment-hero,.player-hero,.vote-hero,.community-hero,.wiki-hero) h1 em {
  color: var(--mona-red);
}

body :is(.eyebrow,[class*="kicker"],[class*="overline"]) {
  color: var(--mona-red-deep);
}

body :is(
  .guide-content,.guide-toc,.terms-document,.news-article,.wiki-card,.community-card,
  .ranking-panel,.punishment-panel,.gallery-card,.news-card,.lead-card,.template-card,
  .market-card,.rail-card,.login-card,.editor-card,.pages-card,.account-bar,
  .contributors-summary,.contributors-grid,.community-document,.discord-widget-card,
  .price-controls,.item-market-table,.chart-panel,.daily-report,.ranking-board,.web-trading
) {
  border: 3px solid var(--mona-ink);
  border-radius: 24px;
  background-color: #fffdf6;
  box-shadow: var(--vote-card-shadow);
}

body :is(
  .card-grid article,.step-list article,.feature-grid article,.prepare-grid article,
  .action-grid article,.recipe-grid article,.start-grid article,.stat-strip,
  .command-list > p,.support-stats > *, .land-compare > *,.arm-type-grid > *,
  .sign-control-grid > *,.exit-grid > *,.faq-list details,.edition-tabs,
  .player-card,.community-item,.wiki-nav,.wiki-article
) {
  border: 2px solid var(--mona-ink);
  border-radius: 18px;
  background-color: #fffdf6;
  box-shadow: 5px 5px 0 rgba(52,39,31,.12);
}

body :is(.guide-body,.terms-body,.news-section,.gallery-section,.ranking-section,.punishment-section,.player-section,.vote-section,.wiki-main,.community-main) {
  background: linear-gradient(180deg, #fff8e8, #fffdf6);
}

body :is(input,select,textarea) {
  border-color: var(--mona-ink);
  border-radius: 12px;
  background: #fff;
}

body :is(
  .hero-actions a,.join-address button,.community-actions a,.gallery-actions a,
  .news-actions a,.closing-inner a,.guide-content a.button,.primary-action,
  button[type="submit"],.filters button:not(.reset)
) {
  color: #fff;
  border: 2px solid var(--mona-ink);
  border-radius: 12px;
  background: var(--mona-red);
  box-shadow: 3px 3px 0 var(--mona-ink);
  font-weight: 800;
}

body :is(
  .hero-actions a,.join-address button,.community-actions a,.gallery-actions a,
  .news-actions a,.closing-inner a,.guide-content a.button,.primary-action,
  button[type="submit"],.filters button:not(.reset)
):hover {
  color: #fff;
  background: #cf403d;
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 var(--mona-ink);
}

body :is(.terms-closing,.guide-closing,.gallery-closing,.closing) {
  color: var(--mona-ink);
  border-block: 3px solid var(--mona-ink);
  background: var(--mona-yellow);
}

body > footer,
body .app-shell > footer {
  color: #fff2e9;
  background: var(--mona-ink);
}

/* Home follows the same card language without changing its content flow. */
body .connection-strip { border: 3px solid var(--mona-ink); border-radius: 20px; background: #fffdf6; box-shadow: var(--vote-card-shadow); }
body .feature-grid article:nth-child(1) { background: #fff4c8; }
body .feature-grid article:nth-child(2) { background: #effaf2; }
body .feature-grid article:nth-child(3) { background: #eaf7fc; }
body .market-stack > * { border: 2px solid var(--mona-ink); border-radius: 18px; box-shadow: 5px 5px 0 rgba(52,39,31,.12); }

/* Pages with a deliberately stronger local theme are pulled back into Vote Quest. */
body.punishments-page .punishment-hero {
  color: var(--mona-ink);
  background-color: var(--mona-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(135deg, var(--mona-blue) 0 51%, #ffe27f 51% 100%);
  background-size: 32px 32px,32px 32px,auto;
}
body.punishments-page .punishment-hero h1 { color: var(--mona-ink); }
body.punishments-page .punishment-hero h1 em { color: var(--mona-red); }
body.punishments-page .hero-lead { color: #57443a; }
body.punishments-page .board-note { color: var(--mona-ink); border: 3px solid var(--mona-ink); border-left: 3px solid var(--mona-ink); background: #fffdf6; box-shadow: 10px 10px 0 var(--mona-red); }
body.punishments-page .board-note p,
body.punishments-page .board-note div,
body.punishments-page .board-note b { color: var(--mona-ink); }
body.punishments-page .punishment-section { background: linear-gradient(180deg,#fff8e8,#fffdf6); }
body.punishments-page .punishment-panel { border-color: var(--mona-ink); }
body.punishments-page .type-tabs button.selected { border-color: var(--mona-ink); background: var(--mona-red); box-shadow: 4px 4px 0 var(--mona-ink); }

body .kabu-page .board-intro,
body .prices-page .board-intro {
  border: 3px solid var(--mona-ink);
  border-radius: 28px;
  background: var(--mona-blue);
  box-shadow: 10px 10px 0 var(--mona-red);
}
body .kabu-page .market-clock,
body .prices-page .market-clock { border: 3px solid var(--mona-ink); border-radius: 28px; background: #ffe27f; box-shadow: 10px 10px 0 var(--mona-red); }
body .kabu-page .stock-card { border: 2px solid var(--mona-ink); background: #fffdf6; box-shadow: 5px 5px 0 var(--mona-mint); }
body .kabu-page .stock-card.selected { outline-color: var(--mona-ink); background: #fff4c8; box-shadow: 7px 7px 0 var(--mona-yellow); }
body .kabu-page :is(.thread-title,.daily-report > .thread-title,.ranking-board > .thread-title,.web-trading > .thread-title) { background: var(--mona-ink); }

/* The fixed menu and information buttons use the exact vote-page controls. */
.public-sidebar-toggle,.public-rail-toggle { color: var(--mona-ink); border-color: var(--mona-ink); background: var(--mona-yellow); box-shadow: 5px 5px 0 var(--mona-red); }

@media (max-width: 700px) {
  body :is(.hero,.terms-hero,.news-hero,.gallery-hero,.ranking-hero,.punishment-hero,.player-hero,.vote-hero,.community-hero,.wiki-hero,.maker-hero,.tool-hero) { background-size: 22px 22px,22px 22px,auto; }
  body :is(.guide-content,.guide-toc,.terms-document,.news-article,.community-card,.ranking-panel,.punishment-panel) { border-width: 2px; box-shadow: 5px 5px 0 rgba(52,39,31,.13); }
}

/* Final consistency and contrast pass. */
body header nav a.current,
body header nav a[aria-current="page"],
body #site-nav a.current,
body .kabu-page .board-nav a.current,
body .prices-page .board-nav a.current {
  color: #fff !important;
  border: 2px solid var(--mona-ink) !important;
  background: var(--mona-red) !important;
  box-shadow: 3px 3px 0 var(--mona-ink) !important;
}

body .hero h1 > span { color: var(--mona-ink); }
body .hero h1 small { color: #8b5d52; }
body .hero-lead { color: #57443a; font-weight: 800; }
body .hero .bbs-snippet { border: 3px solid var(--mona-ink); border-left: 3px solid var(--mona-ink); border-radius: 18px; background: #fffdf6; box-shadow: 7px 7px 0 var(--mona-red); }
body .hero .bbs-snippet p,
body .hero .bbs-snippet .bbs-meta,
body .hero .bbs-meta small { color: #57443a; }
body .hero .bbs-snippet a,
body .hero .bbs-meta span { color: var(--mona-red-deep); }
body .hero .edition-list { color: #6c5047; }

body :is(.guide-status,.cook-status,.hero-search) {
  border: 3px solid var(--mona-ink);
  border-radius: 22px;
  background: rgba(255,253,246,.94);
  box-shadow: 8px 8px 0 var(--mona-red);
}

/* Functional pages and MonaOps receive the same skin without changing layout. */
body :is(.page-heading,.guides-hero,.manual-hero,.team-hero) {
  padding: 24px;
  color: var(--mona-ink);
  border: 3px solid var(--mona-ink);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px),
    linear-gradient(135deg,var(--mona-blue) 0 58%,#ffe27f 58% 100%);
  background-size: 24px 24px,24px 24px,auto;
  box-shadow: 8px 8px 0 var(--mona-red);
}

body :is(
  .items-card,.upload-card,.posts-card,.preview-card,.profiles-card,.owner-card,
  .access-card,.builder-card,.inspect-card,.output-card,.guide-search-card,
  .manual-toc-card,.manual-content,.panel,.project-toolbar,.quick-card,
  .profile-editor,.profile-preview,.manage-pages,.manage-posts,.manage-items,
  .wiki-image-uploader,.import-drop,.preview-card,.pack-card,.editor-pane
) {
  border: 3px solid var(--mona-ink);
  border-radius: 20px;
  background-color: #fffdf6;
  box-shadow: 6px 6px 0 rgba(52,39,31,.13);
}

body :is(button.primary,.primary.generate-button,.export-button,.import-button,.add-color-button) {
  color: #fff;
  border: 2px solid var(--mona-ink);
  border-radius: 11px;
  background: var(--mona-red);
  box-shadow: 3px 3px 0 var(--mona-ink);
}

body :is(.manage,.tool-page,.guide-page,.guides-page,.manual-page,.owner-grid,.wiki-manage-grid,.news-manage-grid,.profile-manage-grid) {
  color: var(--mona-ink);
}