/* The parts the three TwitchRPG website pages share (commands.html, players.html, monsters.html) - only the
   website. The command cards are in commands.css, shared with the Twitch panel (panel.html).
   The base look (sky, top bar, windows, colours, dark mode, DE/EN) comes from natuutuu.com itself:
   /shared/brand.css and the /shared/*.js files of the repo natuutuu.com, loaded from the same domain. Its colours are
   CSS variables (--window-bar-color, --text-color …), so everything here follows dark mode by itself. */

/* links between the three pages, at the top of the first window: Befehle · Spieler · Monster */
.rpg-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.rpg-nav a {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--window-bar-color);
  color: var(--window-bar-text-color);
  font-weight: 600;
  text-decoration: none;
}
.rpg-nav a:hover { box-shadow: 0 0 0 2px var(--highlight-color); }
.rpg-nav a[aria-current="page"] {
  background: transparent;
  color: var(--window-label-color);
  box-shadow: inset 0 0 0 2px var(--window-bar-color);
}

.subtitle { margin: -6px 0 16px !important; opacity: 0.85; }
.message { margin: 12px 0 0 !important; opacity: 0.85; }

/* search field: a pill like the buttons */
.search-field {
  width: 100%;
  padding: 12px 20px;
  font: inherit;
  font-size: 18px; /* 16 px or more keeps phones from zooming in */
  color: var(--text-color);
  background: var(--card-background);
  border: 3px solid var(--window-bar-color);
  border-radius: 999px;
  scroll-margin-top: 110px; /* jumping to it leaves room for the top bar */
}
.search-field:focus { outline: 3px solid var(--highlight-color); outline-offset: 2px; }
.search-field::placeholder { color: var(--text-color); opacity: 0.5; }

/* a box on the paper: one player, one monster … */
.card {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--card-background);
  border: 2px solid var(--window-paper-grid-color);
}
/* many cards side by side where there is room (monsters, commands), one below the other on phones */
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
}
.card-grid > .card { margin-top: 0; }

.card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.card-name { color: var(--window-label-color); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.card-tag { font-weight: 600; opacity: 0.8; }

/* progress bar in the colours of the orange window buttons (like the HP bars on stream) */
.progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.progress-bar {
  flex: 1;
  height: 14px;
  border-radius: 7px;
  background: var(--window-paper-grid-color);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(to bottom, var(--button-top-color), var(--button-bottom-color));
  box-shadow: inset 0 0 0 2px var(--button-ring-color);
}
.progress-text { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* small value boxes: HP, ATK, DEF … */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 12px; }
.stat { padding: 4px 10px; border-radius: 12px; background: var(--window-bar-color); color: var(--window-bar-text-color); }
.stat-label { font-size: 12px; font-weight: 600; line-height: 1.2; opacity: 0.8; }
.stat-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* a ranked list (top 10): every row is a button */
.ranked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ranked-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px 8px 8px;
  border: 2px solid var(--window-paper-grid-color);
  border-radius: 999px;
  background: var(--card-background);
  color: var(--text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ranked-list button:hover { border-color: var(--highlight-color); }
.rank {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--window-bar-color);
  color: var(--window-bar-text-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ranked-list li:nth-child(-n + 3) .rank { /* the first three in the orange of the buttons */
  background: linear-gradient(to bottom, var(--button-top-color), var(--button-bottom-color));
  color: #fff;
}
.rank-name { flex: 1; font-weight: 700; overflow-wrap: anywhere; }
.rank-value { font-weight: 600; opacity: 0.8; white-space: nowrap; font-variant-numeric: tabular-nums; }