/* The header shares the home page's centred content width at every viewport. */
.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  width: 92%;
  max-width: 1320px;
  height: auto;
  min-height: 120px;
  margin: 0 auto;
  padding: 18px 0 12px;
  gap: 12px 16px;
  border-bottom: 1px solid #b7b7764d;
  box-sizing: border-box;
}
.topbar [hidden] { display: none !important; }
.topbar > .wordmark {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0 9px 0 0;
  color: #f5e1b0;
  font: 750 16px/1.12 system-ui, sans-serif;
  letter-spacing: .13em;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
}
.topbar .brand-rune-image {
  display: block;
  flex: 0 0 45px;
  width: 45px;
  height: 51px;
  filter: drop-shadow(0 4px 5px #091f2677);
}
.topbar .brand-arena {
  display: block;
  margin-top: 5px;
  color: #e8bf79;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .4em;
}
.topbar > nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  min-height: 43px;
  min-width: 0;
  margin: 0;
  padding: 10px 0 0;
  gap: 7px 8px;
  border-top: 1px solid #b4be8230;
}
.topbar .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 34px;
  max-width: 100%;
  height: auto;
  padding: 9px 12px;
  color: #b9cdb6;
  background: #1c3b3233;
  border: 1px solid transparent;
  border-radius: 7px;
  font: 650 10px/1.3 system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  text-align: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.topbar .nav-link:hover {
  color: #ffe4aa;
  background: #6b714036;
  border-color: #bfb57c55;
}
.topbar .nav-link.active,
.topbar .nav-link[aria-current="page"] {
  color: #fff0bf;
  background: linear-gradient(115deg, #a58c4c5c, #506b3a66);
  border-color: #e3bd748c;
  box-shadow: inset 0 -2px 0 #dfba73aa;
}
.topbar #navPlay {
  min-width: 96px;
  color: #f7df9f;
  border-color: #c5a56b77;
}
.topbar #navPlay.active,
.topbar #navPlay[aria-current="page"] {
  color: #183e33;
  background: linear-gradient(120deg, #f0d58b, #cfa560);
  border-color: #f1d899;
  box-shadow: 0 3px 13px #021d1d33;
}
.topbar > .account-wallet {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-height: 48px;
  min-width: 76px;
  margin: 0;
  padding: 7px 12px;
  color: #f5d792;
  background: linear-gradient(145deg, #6c6b354d, #26462f);
  border: 1px solid #c0ad688c;
  border-radius: 9px;
  font: 750 14px/1.1 system-ui, sans-serif;
  white-space: nowrap;
}
.topbar > .account-wallet::before {
  content: 'FUNKENTALER';
  color: #d4cb9d;
  font: 600 6px/1.2 system-ui, sans-serif;
  letter-spacing: .085em;
}
.topbar > .server-status {
  grid-column: 3;
  grid-row: 1;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #94b8a4;
  font-size: 8px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.topbar .version { display: none; }
.topbar > .friends-toggle {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 46px;
  min-width: 0;
  max-width: 165px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #85ad8b77;
  border-radius: 9px;
  background: #2c503c88;
  color: #d9e7c7;
  font: 650 9px/1.4 system-ui, sans-serif;
  letter-spacing: .025em;
  text-align: center;
}
.topbar > .friends-toggle:hover {
  background: #456544;
  border-color: #c1cf8b;
}
.topbar > .friends-toggle.has-mail {
  color: #ffdfa1;
  background: #75613a88;
  border-color: #edc578;
}
.topbar > .profile-button {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 145px;
  max-width: 220px;
  min-height: 51px;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid #d5ba777d;
  border-radius: 9px;
  background: linear-gradient(120deg, #c1a65a2b, #244b3d);
  color: #f1dfb4;
  text-align: left;
}
.topbar > .profile-button:hover { background: #3b5c41; border-color: #efd395; }
.topbar .profile-button img { flex: 0 0 33px; width: 33px; height: 37px; object-fit: contain; }
.topbar .profile-button > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.topbar .profile-button strong { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 19px/1.15 Georgia, serif; }
.topbar .profile-button small { color: #c3d1af; font: 650 7px/1.3 system-ui, sans-serif; letter-spacing: .11em; }
.topbar .profile-button-arrow { margin-left: auto; color: #e0bd79; }
.topbar button:focus-visible { outline: 2px solid #ffe4a0; outline-offset: 4px; }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: minmax(180px, 1fr) auto auto auto; gap: 11px 12px; }
  .topbar > .server-status { display: none; }
  .topbar > .friends-toggle { grid-column: 3; max-width: 150px; }
  .topbar > .profile-button { grid-column: 4; max-width: 190px; }
  .topbar .profile-button strong { max-width: 105px; font-size: 17px; }
  .topbar .nav-link { font-size: 9px; padding: 9px 10px; }
  .topbar > nav { gap: 6px; }
}
@media (max-width: 760px) {
  .topbar { width: calc(100% - 28px); max-width: none; padding: 14px 0 10px; }
  .topbar > .wordmark { gap: 9px; font-size: 14px; }
  .topbar .brand-rune-image { flex-basis: 37px; width: 37px; height: 43px; }
  .topbar .brand-arena { font-size: 9px; margin-top: 4px; }
  .topbar .profile-button { min-width: 135px; gap: 7px; padding: 7px 9px; }
  .topbar .profile-button img { flex-basis: 29px; width: 29px; height: 34px; }
  .topbar .profile-button strong { font-size: 16px; max-width: 94px; }
  .topbar .profile-button small { font-size: 6px; }
  .topbar > .friends-toggle { max-width: 130px; font-size: 8px; padding: 9px; }
  .topbar > .account-wallet { min-width: 68px; font-size: 12px; padding: 7px 9px; }
  .topbar > nav { padding-top: 10px; gap: 5px; }
  .topbar .nav-link { min-height: 35px; font-size: 8px; padding: 9px 9px; }
}
@media (max-width: 680px) {
  .topbar { grid-template-columns: minmax(130px, 1fr) auto; grid-template-rows: auto auto auto; gap: 9px 10px; }
  .topbar > .wordmark { grid-column: 1; grid-row: 1; }
  .topbar > .profile-button { grid-column: 2; grid-row: 1; min-width: 130px; max-width: 175px; }
  .topbar > .account-wallet { grid-column: 1; grid-row: 2; justify-self: start; min-height: 38px; grid-template-columns: auto auto; align-items: center; gap: 10px; }
  .topbar > .account-wallet::before { font-size: 6px; }
  .topbar > .friends-toggle { grid-column: 2; grid-row: 2; min-height: 38px; max-width: 175px; padding: 8px 10px; }
  .topbar > nav { grid-column: 1 / -1; grid-row: 3; }
  .topbar #navPlay { min-width: 80px; }
}
@media (max-width: 390px) {
  .topbar > .wordmark { font-size: 12px; letter-spacing: .1em; gap: 7px; padding-right: 0; }
  .topbar .brand-rune-image { flex-basis: 33px; width: 33px; height: 39px; }
  .topbar .brand-arena { font-size: 8px; letter-spacing: .32em; }
  .topbar > .profile-button { min-width: 126px; max-width: 148px; padding: 6px 7px; }
  .topbar .profile-button strong { max-width: 76px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .topbar .nav-link { transition: none; } }
.home-redesign .home-mode-options{grid-template-columns:repeat(5,minmax(0,1fr))}.home-redesign .champion-options{grid-template-columns:repeat(3,minmax(0,1fr))}.home-mode-options>button:last-child{border-top:3px solid #d9a4de}@media(max-width:1100px){.home-redesign .home-mode-options{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.home-redesign .home-mode-options{grid-template-columns:repeat(2,minmax(0,1fr))}} .room-visitors .housing-content{display:grid;gap:12px} .room-visitors .housing-content button{width:100%}