/* Homepage only. The original teal/Times styles remain in index.html. */
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 24px;
}

.theme-picker { margin: 4px 0 20px; }
.theme-picker label { margin-right: 4px; }
.theme-picker select {
  max-width: 100%;
  padding: 3px 5px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: #007575;
  color: white;
  font: inherit;
}
.theme-picker select:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 3px;
}

/* SM64: Wet-Dry World's skybox with dialogue lettering and dark blue panels. */
html[data-home-theme="sm64"] {
  --home-font: "SM64 Dialogue", Verdana, sans-serif;
  background: #060d52 url("images/wet-dry-world-background.webp") center center / cover no-repeat fixed;
}
html[data-home-theme="sm64"] body { background: transparent; }
html[data-home-theme="sm64"] .home-header {
  text-shadow: 2px 2px #101832, -1px -1px #101832;
}
html[data-home-theme="sm64"] .button-list a,
html[data-home-theme="sm64"] .widgets > aside,
html[data-home-theme="sm64"] .theme-picker select {
  background: #172743;
  color: white;
}
html[data-home-theme="sm64"] .button-list a {
  border-color: #a7c3ef #080e28 #080e28 #a7c3ef;
}
html[data-home-theme="sm64"] .button-list a:hover,
html[data-home-theme="sm64"] .button-list a:focus {
  background: #243a64;
  border-color: #080e28 #a7c3ef #a7c3ef #080e28;
}

/* Yotsuba palette from the supplied reference; no board content is copied. */
html[data-home-theme="yotsuba"] {
  --home-font: Arial, Helvetica, sans-serif;
  background: #ffffee;
}
html[data-home-theme="yotsuba"] body {
  background: #ffffee;
  color: #800000;
}
html[data-home-theme="yotsuba"] h1 { color: #800000; }
html[data-home-theme="yotsuba"] .button-list a,
html[data-home-theme="yotsuba"] .widgets > aside,
html[data-home-theme="yotsuba"] .theme-picker select {
  background: #f0e0d6;
  color: #800000;
  border-color: #d9bfb7;
}
html[data-home-theme="yotsuba"] .button-list a {
  color: #0000ee;
  text-decoration: underline;
  /* Same dimensions as the original buttons, but flat like board replies. */
  border-style: solid;
}
html[data-home-theme="yotsuba"] .button-list a:hover,
html[data-home-theme="yotsuba"] .button-list a:focus {
  color: #dd0000;
  background: #ead1c5;
  border-color: #b99586;
}
html[data-home-theme="yotsuba"] .button-list a:focus-visible,
html[data-home-theme="yotsuba"] .moon-widget:focus-visible {
  outline: 2px dotted #800000;
  outline-offset: 3px;
}
html[data-home-theme="yotsuba"] .widget-title,
html[data-home-theme="yotsuba"] .quote-author { color: #117743; }
html[data-home-theme="yotsuba"] .quote-text { color: #526b18; }

/* AO: classic Quorp layout squeezed through a very juicy citrus palette. */
html[data-home-theme="ao"] {
  --home-font: Times, serif;
  background: #ffdf3f;
}
html[data-home-theme="ao"] body {
  background: #ffdf3f;
  color: #713800;
}
html[data-home-theme="ao"] h1 { color: #e84924; }
html[data-home-theme="ao"] .theme-picker select {
  border-color: #a94b1e;
  background: #fff27a;
  color: #713800;
}
html[data-home-theme="ao"] .button-list a {
  color: white;
  border-color: rgba(255,255,255,.65) rgba(105,49,0,.65) rgba(105,49,0,.65) rgba(255,255,255,.65);
  text-shadow: 1px 1px rgba(86,38,0,.55);
}
html[data-home-theme="ao"] .button-list li:nth-child(4n+1) a { background: #ef7d22; }
html[data-home-theme="ao"] .button-list li:nth-child(4n+2) a { background: #76b82a; }
html[data-home-theme="ao"] .button-list li:nth-child(4n+3) a { background: #e85b4f; }
html[data-home-theme="ao"] .button-list li:nth-child(4n+4) a { background: #e6b900; color: #5d3700; text-shadow: none; }
html[data-home-theme="ao"] .button-list a:hover,
html[data-home-theme="ao"] .button-list a:focus {
  filter: brightness(.92);
  border-color: rgba(105,49,0,.65) rgba(255,255,255,.65) rgba(255,255,255,.65) rgba(105,49,0,.65);
}
html[data-home-theme="ao"] .widgets > aside {
  color: white;
  border-color: #fff7b0;
  text-shadow: 1px 1px rgba(86,38,0,.45);
}
html[data-home-theme="ao"] .moon-widget { background: #ef7d22; }
html[data-home-theme="ao"] .quote-widget { background: #76b82a; }
html[data-home-theme="ao"] .bitcoin-widget { background: #e85b4f; }
html[data-home-theme="ao"] .werewolf { display: none; }
html[data-home-theme="ao"] .widget-bitcoin-symbol { border-color: #fff7b0; }
html[data-home-theme="ao"] .button-list a:focus-visible,
html[data-home-theme="ao"] .moon-widget:focus-visible {
  outline: 2px dotted #713800;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .home-header { display: block; }
}