/* One shell for both games. Load last so legacy game themes cannot resize it. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
html body > .brand-ribbon {
  box-sizing: border-box;
  font: 400 10px/18px monospace, 'Microsoft JhengHei', sans-serif;
  letter-spacing: .12em;
  padding: 9px 16px;
  margin: 0;
  text-align: center;
  background: #f3e9de;
  color: #513b30;
}
html body > .site-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 1120px;
  height: 96px;
  margin: 0 auto;
  padding: 0 32px;
  background: transparent;
  border-bottom: 1px solid #e4d9cd;
}
html .site-header .brand-group {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 18px;
}
html .site-header .publisher-link {
  display: block;
  flex: 0 0 auto;
  padding-right: 18px;
  border-right: 1px solid #e4d9cd;
}
html .site-header .publisher-link img {
  display: block;
  width: 55px;
  height: 60px;
  object-fit: contain;
}
html[lang] .site-header .brand {
  display: block;
  min-width: 0;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: .5px;
  color: #513b30;
  text-decoration: none;
}
html[lang] .site-header .brand small {
  display: block;
  font: 400 10px/1.5 'Microsoft JhengHei', 'Segoe UI', sans-serif;
  letter-spacing: .5px;
  margin-top: 7px;
  color: #786b60;
}
html[lang] .site-header > .text-button {
  flex: 0 0 auto;
  max-width: 160px;
  min-height: 44px;
  padding: 8px 0;
  font: 400 11px/1.6 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  letter-spacing: .7px;
  color: #513b30;
  border: 0;
  background: transparent;
}
html body > .site-tools {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 32px 4px;
  border: 0;
  background: transparent;
  font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
}
html .site-tools .guide-shortcuts {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  max-width: none;
}
html .site-tools .guide-button {
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 14px;
  font: 650 12px/18px 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  letter-spacing: .3px;
  white-space: nowrap;
  background: #fffdf9;
  color: #513b30;
  border: 1px solid #cdb9a6;
  border-radius: 10px;
  box-shadow: none;
  font-synthesis: none;
}
html .site-tools .guide-button:last-child {width: 104px}
html .site-tools .species-switch {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: 0;
  width: 106px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cdb9a6;
  border-radius: 10px;
  background: #fffdf9;
}
html .site-tools .species-switch > * {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 0;
  flex: 1 1 0;
  padding: 8px 14px;
  font: 400 12px/18px 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  color: #513b30;
}
html .site-tools .species-switch [aria-current=page] {
  background: #936047;
  color: #fffdf9;
}
html .site-tools .language-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  font: 400 11px/1.5 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  color: #936047;
}
html .site-tools .language-bar select {
  box-sizing: border-box;
  width: 120px;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 4px 8px;
  font: 400 12px/1.5 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  color: #3d3029;
  background: #fffdf9;
  border: 1px solid #c8b59a;
  border-radius: 10px;
}
html .site-tools #language-status {flex-basis: 100%; text-align: right; font-size: 11px}
html .site-tools #language-status:empty {display: none}
/* Equal space above the species-specific hero, including tablet widths. */
html body #app {max-width: 1120px; margin: 0 auto; padding: 0}
html #app > :is(.compact-home, .home-shell) {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 32px 28px;
}
/* Keep the existing compact play header separate from the home shell. */
html body[data-screen=play] > .brand-ribbon,
html body[data-screen=play] > .site-tools {display: none}
html body[data-screen=play] > .site-header {height: 64px}
html body[data-screen=play] .site-header .brand small {display: none}
@media (max-width: 700px) {
  html body > .brand-ribbon {font-size: 9px; line-height: 18px; letter-spacing: 1.2px; padding: 7px 12px}
  html body > .site-header {height: 82px; padding: 0 18px; gap: 8px}
  html .site-header .brand-group {gap: 9px}
  html .site-header .publisher-link {padding-right: 9px}
  html .site-header .publisher-link img {width: 39px; height: 43px}
  html[lang] .site-header .brand {font-size: 17px; letter-spacing: .1px}
  html[lang] .site-header .brand small {font-size: 8px; letter-spacing: 0; margin-top: 5px}
  html[lang] .site-header > .text-button {max-width: 85px; font-size: 10px; letter-spacing: 0}
  html body > .site-tools {justify-content: space-between; gap: 8px; padding: 12px 18px 0}
  html .site-tools .guide-shortcuts {gap: 6px}
  html .site-tools .guide-button {padding: 8px 9px; font-size: 11px}
  html .site-tools .guide-button:last-child {width: 86px}
  html[lang=ja] .site-tools .guide-button:last-child {width: 96px}
  html .site-tools .species-switch {width: 88px}
  html .site-tools .species-switch > * {font-size: 11px; padding: 8px 10px}
  html .site-tools .language-bar {margin-left: auto}
  html .site-tools .language-bar label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  /* 16px prevents iOS from zooming the page when opening the select. */
  html .site-tools .language-bar select {width: 120px; font-size: 16px}
  html #app > :is(.compact-home, .home-shell) {padding: 14px 16px 24px}
  html body[data-screen=play] > .site-header {height: 48px; padding: 4px 16px}
  html body[data-screen=play] .site-header .publisher-link img {width: 28px; height: 30px}
  html body[data-screen=play] .site-header .brand {font-size: 15px}
  html[lang] body[data-screen=play] .site-header > .text-button {min-height: 40px; font-size: 11px}
}
@media (max-width: 359px) {
  html .site-header .brand-group {gap: 5px}
  html[lang] .site-header .brand {font-size: 14px}
  html[lang] .site-header .brand small {font-size: 7px}
  html[lang] .site-header > .text-button {font-size: 9px; max-width: 72px}
}