/* The website: retro fantasy, dark. Gold-framed panels with corner
   flourishes, Cinzel for headings, rarity colours on gear. Laid out for
   phones as well as desktops.

   The fonts are served from here rather than Google Fonts, so a visit
   tells no one else the visitor's address. Both are under the SIL Open
   Font License - fonts/OFL-*.txt. */

@font-face {
  font-family: 'Cinzel';
  src: url(fonts/cinzel.woff2) format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel Decorative';
  src: url(fonts/cinzel-decorative-bold.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #090b11;
  --panel: #10121b;
  --panel-deep: #0b0d14;
  --line: #22252f;
  --text: #e4e1d8;
  --muted: #8f8ca0;

  --gold: #c9a24a;
  --gold-bright: #ecd08a;
  --gold-dim: #5e4a22;
  --purple: #9d7bff;
  --twitch: #9146ff;

  --normal: #b9b9c4;
  --magic: #5aa2ff;
  --rare: #f2cf4f;
  --epic: #b77bff;
  --legendary: #ff9533;

  --xp: #a58bff;
  --hp: #ff5b5b;
  --mp: #4f9dff;

  --heading: 'Cinzel', Georgia, serif;
  --display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font: 16px/1.5 system-ui, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(90, 70, 170, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201, 162, 74, 0.05), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 88px);
  background-attachment: fixed;
  min-height: 100vh;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--gold-bright);
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.2;
}

.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }

/* --- Frame ---------------------------------------------------------------- */

.topbar {
  background: linear-gradient(#0c0e16, #080a10);
  border-bottom: 1px solid var(--gold-dim);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.35);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 26px;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #3a2a0c, 0 0 18px rgba(201, 162, 74, 0.25);
}

.crest {
  width: 28px;
  height: 32px;
  flex: none;
}

.user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  flex: none;
  background: var(--panel);
}

.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ghost-button {
  white-space: nowrap;
  background: transparent;
  border: 1px solid #5b4a99;
  border-radius: 4px;
  color: #cfc6ff;
  font: inherit;
  font-size: 14px;
  padding: 5px 12px;
  cursor: pointer;
}

.ghost-button:hover {
  border-color: var(--purple);
  background: rgba(157, 123, 255, 0.1);
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 0;
}

.footer {
  text-align: center;
  color: var(--muted);
  padding: 40px 16px;
  font-size: 14px;
}

/* --- Panels: a gold frame with a flourish in each corner ------------------- */

.panel {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.5'%3E%3Cpath d='M1.5 29V8Q1.5 1.5 8 1.5H29'/%3E%3Cpath d='M5.5 29V11Q5.5 5.5 11 5.5H29' stroke-opacity='.45'/%3E%3C/g%3E%3Cpath d='M10 6.8 13.2 10 10 13.2 6.8 10Z' fill='%23ecd08a'/%3E%3C/svg%3E") top left / 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg transform='translate(30 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.5'%3E%3Cpath d='M1.5 29V8Q1.5 1.5 8 1.5H29'/%3E%3Cpath d='M5.5 29V11Q5.5 5.5 11 5.5H29' stroke-opacity='.45'/%3E%3C/g%3E%3Cpath d='M10 6.8 13.2 10 10 13.2 6.8 10Z' fill='%23ecd08a'/%3E%3C/g%3E%3C/svg%3E") top right / 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg transform='translate(0 30) scale(1 -1)'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.5'%3E%3Cpath d='M1.5 29V8Q1.5 1.5 8 1.5H29'/%3E%3Cpath d='M5.5 29V11Q5.5 5.5 11 5.5H29' stroke-opacity='.45'/%3E%3C/g%3E%3Cpath d='M10 6.8 13.2 10 10 13.2 6.8 10Z' fill='%23ecd08a'/%3E%3C/g%3E%3C/svg%3E") bottom left / 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg transform='translate(30 30) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.5'%3E%3Cpath d='M1.5 29V8Q1.5 1.5 8 1.5H29'/%3E%3Cpath d='M5.5 29V11Q5.5 5.5 11 5.5H29' stroke-opacity='.45'/%3E%3C/g%3E%3Cpath d='M10 6.8 13.2 10 10 13.2 6.8 10Z' fill='%23ecd08a'/%3E%3C/g%3E%3C/svg%3E") bottom right / 30px no-repeat,
    linear-gradient(180deg, #121521, var(--panel) 40%, var(--panel-deep));
  border: 1px solid rgba(201, 162, 74, 0.35);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 5px rgba(9, 11, 17, 0.6),
    inset 0 0 0 6px rgba(201, 162, 74, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 26px 26px 24px;
  margin-bottom: 18px;
}

/* Section headings: small capitals between two ornamented rules. */
.section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: -4px 0 18px;
}

.section::before,
.section::after {
  content: '';
  flex: 0 1 80px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'%3E%3Cpath d='M0 5H65' stroke='%23c9a24a' stroke-opacity='.55'/%3E%3Cpath d='M71 1.5 74.5 5 71 8.5 67.5 5Z' fill='none' stroke='%23c9a24a'/%3E%3Ccircle cx='78.5' cy='5' r='1.2' fill='%23c9a24a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.section::after {
  transform: scaleX(-1);
}

.section .count {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

/* --- Logged out, and no character ------------------------------------------ */

.hero-message {
  max-width: 620px;
  margin: 48px auto;
  text-align: center;
  padding: 44px 32px 36px;
}

.title {
  font-family: var(--display);
  font-size: 30px;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #3a2a0c;
  margin-bottom: 14px;
}

.lead {
  color: #b9b5c7;
  font-size: 18px;
  margin: 0 0 28px;
}

.twitch-button {
  display: inline-block;
  background: linear-gradient(#a066ff, var(--twitch));
  color: #fff;
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid #c9a8ff;
  border-radius: 4px;
  padding: 12px 28px;
  box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.2), 0 6px 18px rgba(145, 70, 255, 0.3);
}

.twitch-button:hover {
  filter: brightness(1.1);
}

.notice {
  background: #2a1a1d;
  border: 1px solid #6a3038;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 22px 0 0;
}

/* --- The character panel --------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 190px 1fr;
  grid-template-areas:
    'portrait head'
    'portrait bars'
    'portrait points';
  column-gap: 32px;
  row-gap: 14px;
  align-items: start;
}

.portrait {
  grid-area: portrait;
  aspect-ratio: 1;
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 6px;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 170, 60, 0.25), transparent 35%),
    radial-gradient(circle at 75% 30%, rgba(255, 170, 60, 0.2), transparent 35%),
    linear-gradient(#1b1d2c, #0d0e16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 24px rgba(201, 162, 74, 0.15);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.hero-head {
  grid-area: head;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.name {
  font-family: var(--display);
  font-size: 40px;
  color: var(--gold-bright);
  background: linear-gradient(#fbe7b0, #d9ac52 60%, #a97b2b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #2c1f08);
  overflow-wrap: anywhere;
}

.level {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 20px;
  color: #b6a8f0;
  margin: 6px 0 0;
}

.gold {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-bright);
  white-space: nowrap;
}

.coin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #e6b33c 45%, #a8741a);
  box-shadow: inset 0 0 0 2px rgba(120, 80, 10, 0.6), 0 0 12px rgba(230, 179, 60, 0.35);
}

.bars {
  grid-area: bars;
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 130px;
  grid-template-areas: 'label bar text';
  align-items: center;
  column-gap: 16px;
}

.bar-label { grid-area: label; }
.bar { grid-area: bar; }
.bar-text { grid-area: text; }

.bar-label {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 17px;
}

.bar-label.xp, .bar-text.xp { color: var(--xp); }
.bar-label.hp, .bar-text.hp { color: var(--hp); }
.bar-label.mp, .bar-text.mp { color: var(--mp); }

.bar {
  height: 14px;
  padding: 2px;
  background: #06070b;
  border: 1px solid #4a3c1e;
  border-radius: 7px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.bar-fill {
  height: 100%;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: width 0.4s;
}

.bar-fill.xp { background: linear-gradient(90deg, #6b4fd8, #a78cff); }
.bar-fill.hp { background: linear-gradient(90deg, #a51f2a, #ff5454); }
.bar-fill.mp { background: linear-gradient(90deg, #1c56c6, #4fa6ff); }

.bar-text {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.points {
  grid-area: points;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.points:empty {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  padding: 7px 16px;
  border-radius: 4px;
  border: 1.5px solid;
  background: rgba(0, 0, 0, 0.3);
}

.badge::before {
  content: '✦';
  font-size: 18px;
  line-height: 1;
}

.badge.stat {
  border-color: #d9a441;
  color: #f7e2b4;
  box-shadow: 0 0 14px rgba(217, 164, 65, 0.3), inset 0 0 10px rgba(217, 164, 65, 0.12);
}

.badge.stat::before { color: #ffc75a; }

.badge.skill {
  border-color: #9a74ff;
  color: #e3d9ff;
  box-shadow: 0 0 14px rgba(154, 116, 255, 0.35), inset 0 0 10px rgba(154, 116, 255, 0.14);
}

.badge.skill::before { color: #c1a8ff; }

/* --- Equipment and stats ---------------------------------------------------- */

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.columns.bottom {
  grid-template-columns: 1.1fr 0.9fr;
}

/* The paperdoll: a figure, with each slot placed where it is worn.
   Positions are shares of the board, so it scales with the panel. */
.paperdoll {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

/* img/figure.png is a black silhouette; its shape is used as a stencil
   and filled to match the panels, with a gold edge and a faint glow. The
   filter sits on the wrapper because a mask would clip a filter on the
   filled element itself. */
.paperdoll::before {
  content: '';
  position: absolute;
  inset: 4% 18%;
  background: radial-gradient(ellipse at 50% 45%, rgba(157, 123, 255, 0.18), transparent 70%);
}

.figure {
  position: absolute;
  left: 50%;
  top: 1%;
  height: 98%;
  aspect-ratio: 270 / 634;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 1px rgba(201, 162, 74, 0.9))
    drop-shadow(0 0 12px rgba(157, 123, 255, 0.3));
}

.figure-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(#31365a, #1a1d36 55%, #111327);
  -webkit-mask: url(img/figure.png) center / contain no-repeat;
  mask: url(img/figure.png) center / contain no-repeat;
}

.doll-slots {
  display: contents;
}

.doll-slot {
  position: absolute;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--rc, rgba(201, 162, 74, 0.28));
  border-radius: 3px;
  background: radial-gradient(circle, rgba(26, 28, 44, 0.92), rgba(8, 9, 14, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 14px rgba(0, 0, 0, 0.8),
    0 0 12px color-mix(in srgb, var(--rc, transparent) 30%, transparent);
  color: inherit;
  font: inherit;
}

button.doll-slot {
  cursor: pointer;
}

button.doll-slot:hover,
button.doll-slot.selected {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 14px rgba(0, 0, 0, 0.6),
    0 0 18px color-mix(in srgb, var(--rc, var(--gold)) 55%, transparent);
  filter: brightness(1.15);
}

.doll-slot img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7));
}

/* An empty slot says what goes there. */
.doll-slot.empty span {
  font-family: var(--heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  color: rgba(201, 162, 74, 0.4);
  padding: 4px;
}

.ps-Head     { left: 50%; top: 2%;  width: 19%; aspect-ratio: 1; }
.ps-Necklace { left: 73%; top: 6%;  width: 14%; aspect-ratio: 1; }
.ps-MainHand { left: 13%; top: 20%; width: 21%; height: 38%; }
.ps-Body     { left: 50%; top: 24%; width: 25%; height: 34%; }
.ps-OffHand  { left: 87%; top: 20%; width: 21%; height: 38%; }
.ps-Gloves   { left: 13%; top: 64%; width: 18%; aspect-ratio: 1; }
.ps-Ring     { left: 87%; top: 64%; width: 14%; aspect-ratio: 1; }
.ps-Boots    { left: 50%; top: 81%; width: 19%; aspect-ratio: 1; }

.rarity-Normal { --rc: #6c6c78; }
.rarity-Magic { --rc: var(--magic); }
.rarity-Rare { --rc: var(--rare); }
.rarity-Epic { --rc: var(--epic); }
.rarity-Legendary { --rc: var(--legendary); }

.name-Normal { color: var(--normal); }
.name-Magic { color: var(--magic); }
.name-Rare { color: var(--rare); }
.name-Epic { color: var(--epic); }
.name-Legendary { color: var(--legendary); }

.stats {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
}

.stats th {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  text-align: right;
  padding: 8px 14px 6px;
  background: rgba(0, 0, 0, 0.2);
}

.stats td {
  padding: 6px 14px;
  text-align: right;
}

.stats td:first-child {
  text-align: left;
}

/* A gold rule between the groups: attributes, defense and luck, damage,
   elemental defense. */
.stats tr.group-start td {
  border-top: 1px solid rgba(201, 162, 74, 0.35);
}

.stats .gear-bonus {
  color: #6fd98a;
}

.stats .total {
  font-weight: 700;
}

/* --- Bag and consumables: tiles ------------------------------------------ */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  gap: 10px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px 10px;
  background: linear-gradient(#141725, #0d0f18);
  border: 1px solid color-mix(in srgb, var(--rc, #3a3a46) 55%, #1a1c26);
  border-radius: 3px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

button.tile {
  cursor: pointer;
}

button.tile:hover,
button.tile.selected {
  border-color: var(--rc, var(--gold));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 14px color-mix(in srgb, var(--rc, var(--gold)) 35%, transparent);
}

.tile img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}

.tile-count {
  position: absolute;
  top: 48px;
  right: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #f0ead8;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}

.consumable img.ether { filter: hue-rotate(215deg) saturate(1.2) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.consumable img.bomb { filter: grayscale(1) brightness(0.7) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.consumable img.other { filter: hue-rotate(95deg) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.consumable.used-up { opacity: 0.45; }

.empty-note {
  grid-column: 1 / -1;
  color: var(--muted);
  margin: 0;
}

/* --- Item details: a tooltip beside the item, or a panel on phones ------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.overlay.as-panel {
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tooltip {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px 20px 16px;
  background: linear-gradient(#1c1710, #110e09);
  border: 1.5px solid var(--rc, var(--gold));
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.45),
    inset 0 0 0 5px color-mix(in srgb, var(--rc, var(--gold)) 30%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.7),
    0 0 24px color-mix(in srgb, var(--rc, var(--gold)) 25%, transparent);
}

.overlay.as-panel .tooltip {
  position: relative;
}

.close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 26px;
  cursor: pointer;
}

.tooltip-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-right: 20px;
}

.tooltip-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--rc, var(--gold)) 60%, transparent);
  border-radius: 3px;
  background: radial-gradient(circle, #1f1a12, #0a0806);
}

.tooltip-icon img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  image-rendering: pixelated;
}

.tooltip h3 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--rc, var(--gold-bright));
}

.tooltip-head p {
  margin: 4px 0 0;
  font-family: var(--heading);
  font-size: 14px;
  color: color-mix(in srgb, var(--rc, var(--gold)) 75%, #fff);
}

.tooltip-lines {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--rc, var(--gold)) 35%, transparent);
}

.tooltip-lines li {
  padding: 2px 0;
}

.tooltip-lines .dmg-Physical { color: #e8e2d2; }
.tooltip-lines .dmg-Fire { color: #ff8a4c; }
.tooltip-lines .dmg-Lightning { color: #ffe066; }
.tooltip-lines .dmg-Ice { color: #86d8ff; }

/* --- Phones --------------------------------------------------------------- */

@media (max-width: 820px) {
  .brand { font-size: 21px; }

  .panel {
    padding: 22px 16px 18px;
  }

  .hero {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      'portrait head'
      'bars bars'
      'points points';
    column-gap: 14px;
  }

  .hero-head {
    flex-direction: column;
    gap: 6px;
  }

  .name { font-size: 26px; }
  .level { font-size: 16px; margin-top: 2px; }
  .gold { font-size: 20px; }
  .coin { width: 18px; height: 18px; }

  .bar-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'label text' 'bar bar';
    row-gap: 4px;
  }

  .bar-label { font-size: 15px; }
  .bar-text { font-size: 14px; }

  .columns,
  .columns.bottom {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stats th, .stats td { padding-left: 8px; padding-right: 8px; }

  .tiles {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }

  .title { font-size: 24px; }
}

/* The smallest phones: the avatar alone says who is logged in. */
@media (max-width: 480px) {
  .user-name { display: none; }
}