.app-shell {
  min-height: 100vh;
}

.appbar {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* The right-hand padding keeps the corner clear for the menu button, which sits over the bar
     rather than in it - see the note in app-menu.css. */
  padding: 0 76px 0 28px;
  border-bottom: 1px solid #363628;
  background: rgb(11 13 9 / 92%);
  backdrop-filter: blur(16px);

  @media (max-width: 900px) {
    gap: 14px;
  }

  @media (max-width: 720px) {
    height: 56px;
    padding: 0 56px 0 13px;

    /*
      A filtered element is the containing block for anything fixed inside it, so a blur here
      pins the nav below to the foot of this bar instead of the foot of the screen. The nav
      carries the same blur itself, so the phone loses nothing by this bar going without.
    */
    backdrop-filter: none;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font: 900 20px "Jost", sans-serif;
  box-shadow: inset 0 0 0 4px #171a12;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font: 700 20px "Jost", sans-serif;
}

.brand small {
  font-size: 11px;
}

.mainnav {
  display: flex;
  gap: 4px;

  @media (max-width: 720px) {
    position: fixed;
    z-index: 120;
    right: 0;
    bottom: 0;
    left: 0;
    height: 68px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    padding: 5px 4px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: rgb(9 11 8 / 96%);
    backdrop-filter: blur(16px);
  }
}

.mainnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;

  @media (max-width: 900px) {
    padding-inline: 8px;
    font-size: 13px;
  }

  @media (max-width: 720px) {
    padding: 5px 1px;
    display: grid;
    place-items: center;
    gap: 2px;
    border-radius: 7px;
    font-size: 9px;
  }
}

/* The icon is the whole link on a phone, with the word as its caption underneath. */
.mainnav a .icon {
  width: 17px;
  height: 17px;

  @media (max-width: 720px) {
    width: 22px;
    height: 22px;
  }
}

.mainnav a:hover,
.mainnav a.active {
  color: var(--ink);
  background: #24251c;
}

.mainnav a.active {
  box-shadow: inset 0 -2px var(--gold);

  @media (max-width: 720px) {
    box-shadow: inset 0 2px var(--gold);
  }
}

.app-shell > main {
  min-width: 0;
  padding: 42px clamp(24px, 5vw, 76px) 72px;

  @media (max-width: 720px) {
    padding: 26px 16px 96px;
  }
}

.app-shell > main:has(.battle-screen) {
  padding: 0;

  @media (max-width: 720px) {
    padding: 0;
  }
}

/* The small gold line over a heading stands a fixed step above it rather than touching it. */
.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font: 700 11px "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.17em;
}

.topline,
.deck-top {
  display: flex;
  align-items: end;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 30px;

  @media (max-width: 720px) {
    display: grid;
    align-items: start;
    margin-bottom: 24px;
  }
}

/* A player's name can be one long word; it breaks rather than leaving the screen. */
.topline h1 {
  overflow-wrap: anywhere;
}

.dev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #665c37;
  border-radius: 100px;
  color: var(--gold-soft);
  white-space: nowrap;
  font-size: 13px;

  @media (max-width: 720px) {
    width: fit-content;
    white-space: normal;
    font-size: 10px;
  }
}