:root {
  --profile-panel: rgba(17, 19, 20, 0.96);
  --profile-panel-soft: rgba(8, 9, 10, 0.52);
  --profile-line: rgba(236, 205, 142, 0.16);
  --profile-line-strong: rgba(236, 205, 142, 0.32);
  --profile-gold: var(--k-gold-2, #f1c96d);
  --profile-muted: var(--k-muted, #a99d87);
  --profile-text: var(--k-text, #f4e7c9);
  --profile-success: #a6d786;
  --profile-danger: #ef9d95;
  --profile-info: #9bc6e8;
}

body.player-page {
  margin: 0;
  min-height: 100vh;
  color: var(--profile-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 168, 79, 0.1), transparent 34rem),
    linear-gradient(180deg, #08090a 0%, #0b0c0d 46%, #080706 100%);
}

.page-shell {
  width: min(1540px, calc(100% - 28px));
  margin: 0 auto;
  padding: 24px 0 56px;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  min-height: 228px;
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 9, 10, .96), rgba(18, 16, 13, .8) 58%, rgba(18,16,13,.4)),
    radial-gradient(circle at 83% 44%, rgba(214, 168, 79, .14), transparent 20rem),
    url('/assets/player/banner.png') center / cover no-repeat;
}

.profile-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 50%, transparent 0 78px, rgba(214, 168, 79, 0.12) 79px 80px, transparent 81px),
    linear-gradient(90deg, transparent 0 75%, rgba(214, 168, 79, 0.035) 75% 75.5%, transparent 75.5%);
}

.hero-copy { position: relative; z-index: 1; }

.eyebrow {
  margin: 0 0 7px;
  color: var(--k-gold, #d6a84f);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p { margin-top: 0; }

.profile-hero h1 {
  margin-bottom: 12px;
  color: var(--profile-gold);
  font-size: clamp(2.7rem, 6vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.profile-hero p:not(.eyebrow) {
  max-width: 800px;
  margin-bottom: 0;
  color: var(--profile-muted);
  line-height: 1.65;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.profile-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: 18px;
  align-items: end;
  padding: 16px 18px;
}

.search-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--profile-gold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-row {
  display: flex;
  gap: 10px;
}

.search-row input {
  flex: 1;
  min-width: 0;
  min-height: 43px;
  padding: 10px 13px;
  border: 1px solid var(--profile-line);
  border-radius: 8px;
  color: var(--profile-text);
  background: rgba(0, 0, 0, 0.34);
  outline: none;
}

.search-row input:focus {
  border-color: rgba(214, 168, 79, 0.72);
  box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.1);
}

.status-line {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(236, 205, 142, 0.1);
  border-radius: 8px;
  color: var(--profile-muted);
  background: rgba(0, 0, 0, 0.22);
  line-height: 1.45;
}

.status-line.ok { color: var(--profile-success); }
.status-line.error { color: var(--profile-danger); }

.ownership-panel {
  margin-top: 12px;
  padding: 11px 18px;
  color: var(--profile-muted);
  line-height: 1.55;
}

.ownership-panel strong { color: var(--profile-text); }
.ownership-panel.owner { border-color: rgba(166, 215, 134, 0.36); }
.ownership-panel.viewer { border-color: rgba(239, 157, 149, 0.3); }

.ownership-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.account-link,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid var(--profile-line);
  border-radius: 999px;
  color: var(--profile-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.82rem;
  line-height: 1;
  text-decoration: none;
}

.status-badge.ok { color: var(--profile-success); }
.status-badge.warn { color: var(--profile-gold); }

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 8px 11px;
  border: 1px solid var(--profile-line);
  border-radius: 8px;
  color: var(--profile-text);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 800;
  transition: transform 0.12s ease, filter 0.12s ease, border-color 0.12s ease;
}

.profile-link:hover { transform: translateY(-1px); filter: brightness(1.08); border-color: var(--profile-line-strong); }
.profile-link:active { transform: translateY(1px) scale(0.99); }

.profile-layout {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.section-card {
  min-width: 0;
  padding: 17px;
}

.section-card:not(.section-primary) {
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

.hero-card { grid-area: hero; }
.resources-card { grid-area: resources; }
.equipment-card { grid-area: equipment; }
.inventory-card { grid-area: inventory; }
.journey-card { grid-area: journey; }
.quest-card { grid-area: quest; }
.combat-card { grid-area: combat; }
.trophies-card { grid-area: trophies; }
.achievements-card { grid-area: achievements; }
.world-card { grid-area: world; }
.hero-path-card { grid-area: heroPath; }
.activity-card { grid-area: activity; }

.section-primary {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(214, 168, 79, 0.04), transparent 60%),
    var(--profile-panel);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--profile-line);
}

.section-heading h2 {
  margin: 0;
  color: var(--profile-gold);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-heading .eyebrow { margin-bottom: 3px; }
.compact-button { min-height: 31px; padding: 7px 10px; font-size: 0.74rem; }

.hero-content {
  min-height: 270px;
}

.loading-placeholder {
  display: grid;
  place-items: center;
  min-height: 270px;
  color: var(--profile-muted);
  text-align: center;
}

.hero-profile {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
  gap: 24px;
}

.portrait-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--profile-line-strong);
  border-radius: 48% 48% 14px 14px;
  background:
    radial-gradient(circle at 50% 34%, rgba(214, 168, 79, 0.2), transparent 38%),
    linear-gradient(180deg, rgba(58, 43, 26, 0.65), rgba(7, 8, 8, 0.94));
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.72), 0 10px 26px rgba(0, 0, 0, 0.35);
}

.portrait-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: contain;
  image-rendering: pixelated;
}

.portrait-fallback {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(214, 168, 79, 0.28);
  border-radius: 50%;
  color: var(--profile-gold);
  background: rgba(0, 0, 0, 0.32);
  font-size: 3.6rem;
}

.portrait-caption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  padding-top: 8px;
  border-top: 1px solid rgba(214, 168, 79, 0.13);
  text-align: center;
  text-transform: uppercase;
}

.hero-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--k-gold, #d6a84f);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-name {
  margin-bottom: 8px;
  color: var(--profile-text);
  font-size: clamp(2.3rem, 4vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.hero-subtitle {
  line-height: 1.5;
}

.hero-meta,
.inline-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--profile-line);
  border-radius: 999px;
  color: var(--profile-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.82rem;
}

.meta-badge strong { color: var(--profile-text); }

.resource-grid {
  display: grid;
  gap: 11px;
}

.resource-tile,
.stat-tile,
.equipment-slot,
.inventory-slot,
.journey-option,
.quest-box,
.combat-box,
.entry-row,
.world-progress,
.duel-row {
  border: 1px solid var(--profile-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.32);
}

.resource-tile { padding: 12px; }
.resource-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resource-head span { color: var(--profile-muted); font-size: 0.82rem; }
.resource-head strong { color: var(--profile-gold); }

.progress-track {
  overflow: hidden;
  height: 9px;
  margin-top: 8px;
  border: 1px solid rgba(236, 205, 142, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
}

.progress-track > span {
  display: block;
  width: var(--value, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #793295, #d06cd9);
}

.progress-track.green > span { background: linear-gradient(90deg, #4f7d30, #9bd45a); }
.progress-track.gold > span { background: linear-gradient(90deg, #8c5d19, #f0c76e); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.stat-tile {
  position: relative;
  min-height: 90px;
  padding: 13px 12px 12px 48px;
}

.stat-icon {
  position: absolute;
  top: 13px;
  left: 11px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(214, 168, 79, 0.16);
  border-radius: 7px;
  background: rgba(214, 168, 79, 0.06);
}

.stat-label { display: block; color: var(--profile-muted); font-size: 0.76rem; }
.stat-value { display: block; margin: 4px 0 2px; color: var(--profile-gold); font-size: 1.22rem; font-weight: 900; }
.stat-help { color: var(--profile-muted); font-size: 0.75rem; line-height: 1.35; }

.equipment-grid { display: grid; gap: 10px; }
.equipment-slot { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 11px; }
.item-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(236, 205, 142, 0.18);
  border-radius: 9px;
  color: var(--profile-gold);
  background: radial-gradient(circle at 50% 20%, rgba(214, 168, 79, 0.13), transparent 66%), rgba(0, 0, 0, 0.36);
  font-size: 1.55rem;
}
.item-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.item-label { color: var(--profile-muted); font-size: 0.78rem; }
.item-name { margin-top: 4px; color: var(--profile-text); font-weight: 900; }
.item-meta { margin-top: 5px; color: var(--profile-muted); font-size: 0.78rem; line-height: 1.4; }
.total-stats { margin-top: 10px; padding: 11px; border: 1px solid var(--profile-line); border-radius: 10px; background: rgba(0,0,0,.2); }
.total-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.total-stats-grid span { padding: 7px; border: 1px solid rgba(236,205,142,.08); border-radius: 7px; color: var(--profile-muted); }
.total-stats-grid strong { color: var(--profile-gold); }

.inventory-heading { margin-bottom: 12px; }

.inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.inventory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.inventory-filter {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--profile-line);
  border-radius: 8px;
  color: var(--profile-muted);
  background: rgba(255,255,255,.025);
  cursor: pointer;
  font: inherit;
}

.inventory-filter__icon { width: 26px; height: 26px; display: grid; place-items: center; }
.inventory-filter__icon img { width: 100%; height: 100%; object-fit: contain; }
.inventory-filter strong { color: var(--profile-text); font-size: .78rem; }
.inventory-filter small { min-width: 21px; padding: 2px 5px; border-radius: 999px; color: var(--profile-muted); background: rgba(0,0,0,.28); font-size: .68rem; }
.inventory-filter:hover:not(:disabled) { border-color: var(--profile-line-strong); transform: translateY(-1px); }
.inventory-filter.is-active { border-color: rgba(214,168,79,.58); color: var(--profile-gold); background: rgba(214,168,79,.09); box-shadow: inset 0 0 0 1px rgba(214,168,79,.08); }
.inventory-filter.is-active small { color: #17100a; background: var(--k-gold, #d6a84f); }
.inventory-filter:disabled { opacity: .38; cursor: not-allowed; }

.inventory-sort {
  display: grid;
  gap: 5px;
  min-width: 176px;
}

.inventory-sort span { color: var(--profile-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.inventory-sort select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--profile-line); border-radius: 8px; color: var(--profile-text); background: #151616; }

.inventory-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.inventory-grid {
  display: grid;
}

.inventory-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid var(--profile-line);
  border-radius: 10px;
  color: var(--profile-text);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), rgba(0,0,0,.24);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.inventory-slot:active { transform: none; filter: none; }
.inventory-slot.is-selected { border-color: rgba(214,168,79,.7); box-shadow: inset 0 0 0 1px rgba(214,168,79,.15), 0 0 22px rgba(214,168,79,.08); }
.inventory-slot .item-icon { position: relative; z-index: 1; }
.inventory-name { font-weight: 900; }
.inventory-qty { position: absolute; padding: 3px 6px; border-radius: 999px; color: #17100a; background: var(--k-gold, #d6a84f); font-size: .72rem; font-weight: 900; }
.inventory-equipped { position: absolute; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(166,215,134,.35); border-radius: 50%; color: #182012; background: var(--profile-success); font-size: .72rem; font-weight: 900; }
.inventory-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--profile-line); border-radius: 10px; background: rgba(0,0,0,.16); text-align: center; }

.inventory-detail {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(214,168,79,.3);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(214,168,79,.06), transparent 46%), rgba(0,0,0,.26);
}
.inventory-detail[hidden] { display: none; }
.inventory-detail__icon { display: grid; place-items: center; }
.inventory-detail__item-icon { width: 96px; height: 96px; }
.inventory-detail__head { display: flex; justify-content: space-between; gap: 12px; }
.inventory-detail__head h3 { margin: 0; font-size: 1.35rem; }
.inventory-detail__body > p { margin: 9px 0 0; color: var(--profile-muted); line-height: 1.55; }
.inventory-detail__close { width: 34px; height: 34px; border: 1px solid var(--profile-line); border-radius: 8px; color: var(--profile-muted); background: rgba(255,255,255,.035); cursor: pointer; font-size: 1.15rem; }
.inventory-detail__stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.inventory-detail__stats span { padding: 7px 9px; border: 1px solid var(--profile-line); border-radius: 8px; color: var(--profile-muted); background: rgba(0,0,0,.22); font-size: .8rem; }
.inventory-detail__stats strong { color: var(--profile-gold); }
.inventory-detail__note { margin-top: 10px; color: var(--profile-muted); font-size: .8rem; }
.inventory-detail__equipped { color: var(--profile-success); }

.inventory-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--profile-line);
}
.inventory-counter { color: var(--profile-muted); font-size: .8rem; }

.journey-current,
.quest-box,
.world-progress { padding: 13px; }
.journey-current { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 11px; align-items: center; border: 1px solid var(--profile-line); border-radius: 10px; background: rgba(0,0,0,.23); }
.journey-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(214,168,79,.18); border-radius: 50%; font-size: 1.7rem; }
.journey-title { color: var(--profile-text); font-weight: 900; }
.journey-meta { margin-top: 3px; color: var(--profile-muted); font-size: 0.82rem; }
.journey-options { display: grid; gap: 8px; margin-top: 10px; }
.journey-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; }
.journey-option span { color: var(--profile-text); }
.journey-option small { color: var(--profile-muted); text-align: right; }

.quest-title { color: var(--profile-text); font-size: 1rem; font-weight: 900; }
.quest-meta { margin-top: 5px; color: var(--profile-muted); font-size: 0.82rem; line-height: 1.45; }
.quest-progress { margin-top: 10px; }
.quest-requirements { display: grid; gap: 6px; margin-top: 10px; }
.quest-requirement { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(236,205,142,.08); color: var(--profile-muted); font-size: 0.8rem; }
.quest-requirement strong.ready { color: var(--profile-success); }
.quest-requirement strong.missing { color: var(--profile-danger); }

.combat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.combat-box { padding: 13px; }
.combat-box h3 { margin-bottom: 7px; color: var(--profile-gold); }
.combat-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(236,205,142,.08); color: var(--profile-muted); font-size: 0.82rem; }
.combat-metric:first-of-type { border-top: 0; }
.combat-metric strong { color: var(--profile-text); }
.combat-actions { display: flex; flex-wrap: wrap; gap: 7px; }

.entry-list,
.duel-list { display: grid; gap: 8px; }
.entry-row,
.duel-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; }
.entry-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(214,168,79,.16); border-radius: 8px; color: var(--profile-gold); background: rgba(214,168,79,.05); }
.entry-title { color: var(--profile-text); font-weight: 800; }
.entry-meta { margin-top: 3px; color: var(--profile-muted); font-size: 0.77rem; }
.entry-tag { color: var(--profile-gold); font-size: 0.76rem; text-align: right; }

.world-progress { margin-bottom: 10px; }
.world-progress-head { display: flex; justify-content: space-between; gap: 10px; color: var(--profile-muted); }
.world-progress-head strong { color: var(--profile-gold); }
.location-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.location-card { min-height: 74px; padding: 10px; border: 1px solid var(--profile-line); border-radius: 9px; background: rgba(0,0,0,.22); }
.location-card strong { display: block; color: var(--profile-text); font-size: .82rem; }
.location-card small { display: block; margin-top: 4px; color: var(--profile-muted); font-size: .74rem; }

.duel-result { font-weight: 900; }
.duel-result.win { color: var(--profile-success); }
.duel-result.loss { color: var(--profile-danger); }
.duel-opponent { color: var(--profile-text); font-weight: 800; }
.duel-meta { margin-top: 3px; color: var(--profile-muted); font-size: 0.77rem; }
.duel-date { color: var(--profile-muted); font-size: 0.76rem; text-align: right; }
.readonly-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--profile-line-strong); border-radius: 50%; background: rgba(214,168,79,.08); font-size: 1.45rem; }

.k-empty { color: var(--profile-muted); line-height: 1.5; }

.rarity-common { color: #d8cfbb; }
.rarity-uncommon { color: #9ed38d; }
.rarity-rare { color: #8fbdf0; }
.rarity-epic { color: #c89bf0; }
.rarity-legendary,
.rarity-relic { color: #f0c76e; }
.rarity-mythic { color: #f09bf0; text-shadow: 0 0 12px rgba(240,155,240,.18); }

@media (max-width: 1280px) {
  .inventory-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}

@media (max-width: 920px) {
  .page-shell { width: min(100% - 20px, 1540px); padding-top: 16px; }
  .profile-hero { grid-template-columns: 1fr; min-height: 0; }
  .profile-search { grid-template-columns: 1fr; }
  .hero-profile { grid-template-columns: 1fr; }
  .portrait-frame { min-height: 240px; }
  .portrait-frame img { min-height: 240px; }
  .combat-grid { grid-template-columns: 1fr; }
  .inventory-toolbar { grid-template-columns: 1fr; }
  .inventory-sort { min-width: 0; width: min(260px, 100%); }
  .inventory-order-note { margin-left: 0; }
  .location-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 650px) {
  .profile-hero { padding: 22px 18px; }
  .profile-hero h1 { font-size: clamp(2.6rem, 17vw, 4.4rem); }
  .search-row { flex-direction: column; }
  .search-row .k-button { width: 100%; }
  .section-card { padding: 14px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .inventory-detail { grid-template-columns: 1fr; }
  .inventory-detail__icon { justify-content: start; }
  .inventory-footer { align-items: stretch; flex-direction: column; }
  .inventory-footer .k-button { width: 100%; }
  .inventory-filter { grid-template-columns: auto auto; }
  .inventory-filter small { grid-column: 2; }
  .inventory-order-note { width: 100%; }
  .stat-grid,
  .total-stats-grid,
  .location-grid { grid-template-columns: 1fr; }
  .entry-row,
  .duel-row { grid-template-columns: auto minmax(0,1fr); }
  .entry-tag,
  .duel-date { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


.trophy-profile-grid { display: grid; gap: 9px; }
.trophy-profile-summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.trophy-profile-summary span { padding: 6px 9px; border: 1px solid var(--profile-line); border-radius: 999px; color: var(--profile-gold); background: rgba(214,168,79,.07); }
.trophy-profile-item { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--profile-line); border-radius: 9px; background: rgba(0,0,0,.2); }
.trophy-profile-item .item-icon { width: 46px; height: 46px; }
.trophy-profile-item .item-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.trophy-profile-item strong, .trophy-profile-item small { display: block; }
.trophy-profile-item small { margin-top: 3px; color: var(--profile-muted); }
@media (max-width: 920px) { .trophy-profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 650px) { .trophy-profile-grid { grid-template-columns: 1fr; } }
.profile-links {
  margin-top: 14px;
}

.profile-search {
  margin-top: 14px;
}

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

.inventory-group {
  min-width: 0;
  padding-top: 2px;
}

.inventory-group + .inventory-group {
  padding-top: 16px;
  border-top: 1px solid var(--profile-line);
}

.inventory-group__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 34px;
}

.inventory-group__heading h3 {
  margin: 0;
  color: var(--profile-gold);
  font-size: 0.88rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inventory-group__heading > span:last-child {
  margin-left: auto;
  color: var(--profile-muted);
  font-size: 0.74rem;
}

.inventory-group__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

.inventory-group__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inventory-group__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1280px) {

  .inventory-group__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {

  .inventory-group__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .inventory-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-group__heading {
    align-items: flex-start;
  }
}
.profile-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    'hero hero hero hero hero hero hero hero resources resources resources resources'
    'equipment equipment equipment equipment journey journey journey journey world world world world'
    'heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath'
    'inventory inventory inventory inventory inventory inventory inventory inventory trophies trophies trophies trophies'
    'achievements achievements achievements achievements achievements achievements quest quest quest quest quest quest'
    'combat combat combat combat combat combat combat combat combat combat combat combat'
    'activity activity activity activity activity activity activity activity activity activity activity activity';
  align-items: stretch;
}

.hero-card,
.resources-card,
.equipment-card,
.journey-card,
.world-card,
.inventory-card,
.trophies-card,
.achievements-card,
.quest-card {
  height: 100%;
}

.hero-card,
.resources-card {
  min-height: 410px;
}

.hero-content,
.hero-profile {
  height: 100%;
}

.hero-profile {
  align-items: center;
}

.resource-grid {
  height: calc(100% - 54px);
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.resource-tile {
  display: grid;
  align-content: center;
}

.portrait-caption {
  color: var(--class-color, var(--profile-gold));
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .92), 0 0 12px color-mix(in srgb, var(--class-color, #f1c96d) 34%, transparent);
}

.hero-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--class-color, var(--profile-gold));
}

.hero-subtitle strong {
  color: var(--class-color, var(--profile-gold));
}

.hero-subtitle > span:last-child {
  color: var(--profile-muted);
}

.hero-class-icon,
.journey-class-icon,
.journey-branch-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--class-color, var(--profile-gold));
}

.hero-class-icon {
  width: 28px;
  height: 28px;
}

.journey-class-icon {
  width: 38px;
  height: 38px;
}

.journey-branch-icon {
  width: 24px;
  height: 24px;
}

.hero-class-icon img,
.journey-class-icon img,
.journey-branch-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
}

.journey-icon {
  color: var(--class-color, var(--profile-gold));
  border-color: color-mix(in srgb, var(--class-color, #f1c96d) 32%, transparent);
  background: color-mix(in srgb, var(--class-color, #f1c96d) 8%, rgba(0, 0, 0, .28));
}

.journey-title,
.journey-option strong {
  color: var(--class-color, var(--profile-text));
}

.journey-option > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.progress-track.blue > span {
  background: linear-gradient(90deg, #3f7da8, #8bd4ff);
  box-shadow: 0 0 10px rgba(107, 195, 244, .28);
}

.inventory-card {
  overflow: visible;
}

.inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 11px;
  align-items: start;
}

.inventory-slot {
  min-height: 176px;
  padding: 12px 10px 13px;
  grid-template-rows: 100px auto auto;
  align-content: start;
  overflow: visible;
  isolation: isolate;
}

.inventory-slot:hover:not(:disabled),
.inventory-slot:focus-visible {
  z-index: 30;
  transform: none;
  filter: none;
  /* Existing rarity-* classes provide currentColor; the artwork stays untouched. */
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32), 0 0 10px color-mix(in srgb, currentColor 24%, transparent);
  outline: none;
}

.inventory-slot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.inventory-slot.is-selected:hover:not(:disabled),
.inventory-slot.is-selected:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(214,168,79,.5), 0 0 10px color-mix(in srgb, currentColor 24%, transparent);
}

.inventory-slot .item-icon {
  width: 96px;
  height: 96px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.inventory-slot .item-icon img {
  filter: none;
  image-rendering: auto;
}

.inventory-equipped {
  top: 8px;
  right: 8px;
  z-index: 5;
}

.inventory-qty {
  right: 8px;
  top: 78px;
  bottom: auto;
  z-index: 5;
  min-width: 28px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}

.inventory-name {
  align-self: end;
  min-height: 2.4em;
  margin-top: 7px;
  color: var(--profile-text);
  font-size: .82rem;
  line-height: 1.2;
}

.inventory-category {
  margin-top: 4px;
  color: var(--profile-muted);
  font-size: .7rem;
}

.inventory-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 80;
  display: grid;
  gap: 6px;
  width: min(280px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(214, 168, 79, .46);
  border-radius: 10px;
  color: var(--profile-text);
  background: rgba(10, 11, 11, .98);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(255, 255, 255, .025);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.inventory-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(214, 168, 79, .46);
  border-bottom: 1px solid rgba(214, 168, 79, .46);
  background: rgba(10, 11, 11, .98);
  transform: translate(-50%, -5px) rotate(45deg);
}

.inventory-slot:hover .inventory-tooltip,
.inventory-slot:focus-visible .inventory-tooltip,
.inventory-slot:focus .inventory-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.inventory-tooltip > strong {
  font-size: .95rem;
}

.inventory-tooltip > small,
.inventory-tooltip > span,
.inventory-tooltip > em {
  color: var(--profile-muted);
  font-size: .76rem;
  line-height: 1.45;
}

.inventory-tooltip > em {
  padding-top: 6px;
  border-top: 1px solid var(--profile-line);
  font-style: normal;
}

.inventory-tooltip__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inventory-tooltip__stats span {
  padding: 4px 6px;
  border: 1px solid var(--profile-line);
  border-radius: 6px;
  color: var(--profile-muted);
  background: rgba(255, 255, 255, .025);
  font-size: .7rem;
}

.inventory-tooltip__stats strong {
  color: var(--profile-gold);
}

.inventory-order-note {
  margin-left: 0;
}

.trophy-profile-grid {
  grid-template-columns: 1fr;
}

.trophies-card .trophy-profile-item {
  grid-template-columns: 52px minmax(0, 1fr);
}

.achievement-progress {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--profile-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
}

.achievement-list {
  margin-top: 0;
}

.combat-grid {
  align-items: stretch;
}

.combat-box {
  display: flex;
  min-height: 250px;
  flex-direction: column;
}

.combat-actions {
  margin-top: auto;
  padding-top: 12px;
}

@media (max-width: 1280px) {
  .profile-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'hero resources'
      'equipment journey'
      'world world'
      'heroPath heroPath'
      'inventory inventory'
      'trophies achievements'
      'quest quest'
      'combat combat'
      'activity activity';
  }

  .hero-card,
  .resources-card {
    min-height: 390px;
  }
}

@media (max-width: 920px) {
  .profile-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      'hero'
      'resources'
      'equipment'
      'journey'
      'world'
      'heroPath'
      'inventory'
      'trophies'
      'achievements'
      'quest'
      'combat'
      'activity';
  }

  .hero-card,
  .resources-card {
    min-height: 0;
  }

  .resource-grid {
    height: auto;
    grid-template-rows: none;
  }

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

@media (max-width: 650px) {
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-slot {
    min-height: 168px;
  }

  .inventory-tooltip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    transform: translateY(8px);
  }

  .inventory-tooltip::after {
    display: none;
  }

  .inventory-slot:hover .inventory-tooltip,
  .inventory-slot:focus-visible .inventory-tooltip,
  .inventory-slot:focus .inventory-tooltip {
    transform: translateY(0);
  }
}
.inventory-summary:empty { display: none; }
.inventory-summary .inventory-order-note {
  margin-left: 0;
}

.inventory-slot.tooltip-align-left .inventory-tooltip {
  left: 0;
  right: auto;
  transform: translate(0, 6px);
}
.inventory-slot.tooltip-align-left:hover .inventory-tooltip,
.inventory-slot.tooltip-align-left:focus-visible .inventory-tooltip,
.inventory-slot.tooltip-align-left:focus .inventory-tooltip {
  transform: translate(0, 0);
}
.inventory-slot.tooltip-align-left .inventory-tooltip::after {
  left: 42px;
}

.inventory-slot.tooltip-align-right .inventory-tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}
.inventory-slot.tooltip-align-right:hover .inventory-tooltip,
.inventory-slot.tooltip-align-right:focus-visible .inventory-tooltip,
.inventory-slot.tooltip-align-right:focus .inventory-tooltip {
  transform: translate(0, 0);
}
.inventory-slot.tooltip-align-right .inventory-tooltip::after {
  left: auto;
  right: 42px;
  transform: translate(50%, -5px) rotate(45deg);
}

.inventory-slot.tooltip-below .inventory-tooltip {
  top: calc(100% + 10px);
  bottom: auto;
}
.inventory-slot.tooltip-below .inventory-tooltip::after {
  top: auto;
  bottom: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(214, 168, 79, .46);
  border-top: 1px solid rgba(214, 168, 79, .46);
  transform: translate(-50%, 5px) rotate(45deg);
}
.inventory-slot.tooltip-below.tooltip-align-left .inventory-tooltip::after {
  transform: translate(-50%, 5px) rotate(45deg);
}
.inventory-slot.tooltip-below.tooltip-align-right .inventory-tooltip::after {
  transform: translate(50%, 5px) rotate(45deg);
}
.achievement-entry {
  position: relative;
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.achievement-entry.rarity-border-uncommon {
  border-color: rgba(126, 187, 102, .55);
  box-shadow: inset 3px 0 0 rgba(126, 187, 102, .75);
}
.achievement-entry.rarity-border-rare {
  border-color: rgba(86, 151, 218, .58);
  box-shadow: inset 3px 0 0 rgba(86, 151, 218, .8);
}
.achievement-entry.rarity-border-epic {
  border-color: rgba(161, 105, 213, .6);
  box-shadow: inset 3px 0 0 rgba(161, 105, 213, .82);
}
.achievement-entry.rarity-border-legendary,
.achievement-entry.rarity-border-relic {
  border-color: rgba(222, 166, 61, .68);
  box-shadow: inset 3px 0 0 rgba(222, 166, 61, .9), 0 0 16px rgba(222, 166, 61, .06);
}
.achievement-entry.rarity-border-mythic {
  border-color: rgba(224, 92, 187, .68);
  box-shadow: inset 3px 0 0 rgba(224, 92, 187, .92), 0 0 18px rgba(165, 87, 225, .1);
  background: linear-gradient(90deg, rgba(130, 61, 151, .08), rgba(0, 0, 0, .18) 34%);
}
.inventory-summary,
.inventory-order-note {
  display: none !important;
}

.inventory-tooltip-template {
  display: none !important;
}

.inventory-tooltip--portal {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 10050;
  display: grid;
  width: min(300px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
}

.inventory-tooltip--portal.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.inventory-tooltip--portal::after {
  left: var(--tooltip-arrow-left, 50%);
  right: auto;
}

.inventory-tooltip--portal[data-placement='bottom']::after {
  top: auto;
  bottom: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(214, 168, 79, .46);
  border-top: 1px solid rgba(214, 168, 79, .46);
  transform: translate(-50%, 5px) rotate(45deg);
}

@media (max-width: 650px) {
  .inventory-tooltip--portal {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 12px;
    width: auto;
    max-height: min(52vh, 420px);
  }

  .inventory-tooltip--portal::after {
    display: none;
  }
}
.profile-search .search-row{grid-template-columns:minmax(0,1fr) auto auto}.equipment-slot--interactive{cursor:pointer;transition:border-color .15s ease,transform .15s ease}.equipment-slot--interactive:hover,.equipment-slot--interactive:focus-visible{border-color:var(--k-gold-2);transform:translateY(-1px);outline:none}.profile-quest-list{display:grid;gap:9px}.quest-box--compact{padding:13px}.quest-box--compact .quest-title{margin-top:8px}.profile-item-detail__head{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:center;padding-right:36px}.profile-item-detail__icon{display:grid;place-items:center;width:110px;height:110px}.profile-item-detail__icon img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.profile-item-detail h2{margin:2px 0}.profile-item-detail .item-detail-stats{padding:11px;border:1px solid var(--k-line);border-radius:9px;color:var(--k-gold-2);background:rgba(255,255,255,.025)}.profile-item-detail .detail-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.detail-modal[hidden]{display:none}.detail-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:12px}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.78)}.detail-panel{position:relative;z-index:1;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:24px}.modal-close{position:absolute;right:10px;top:10px;width:36px;height:36px;border:1px solid var(--k-line);border-radius:50%;color:var(--k-text);background:#0a0c0d}.profile-links[hidden]{display:none!important}.player-page:has(.profile-links[hidden]) .profile-layout{margin-top:18px}@media(max-width:700px){.profile-search .search-row{grid-template-columns:1fr}.profile-item-detail__head{grid-template-columns:82px minmax(0,1fr)}.profile-item-detail__icon{width:82px;height:82px}}

/* 0.10.25a130c – Kaelenova kosmetika profilu */
.hero-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hero-name-row .hero-name{margin:0}.nameplate-ornament{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(185,203,232,.35);border-radius:50%;background:rgba(83,103,151,.18);box-shadow:0 0 15px rgba(113,128,209,.18)}.nameplate-ornament img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}

/* 0.10.25a182 – šířka obsahu pro sdílený modal */
.detail-panel { --modal-width: 600px; }

/* 0.10.25a189 – aktivní titul hráče */
.hero-active-title {
  margin-top: 4px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--k-gold-2);
  text-shadow: 0 0 12px rgba(214,168,79,.18);
}
.hero-active-title.rarity-epic { color: #c89cff; }
.hero-active-title.rarity-legendary { color: #f2b85e; }
.hero-active-title.rarity-mythic { color: #f084c5; }

/* 0.10.25a194p – Cesty hrdiny / hrdinky */
.hero-path-card { min-height: 0; }
.hero-path-summary { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; margin-bottom: 15px; padding: 11px 18px; border: 1px solid rgba(214,168,79,.18); border-radius: 11px; background: radial-gradient(circle at 0 50%, rgba(214,168,79,.1), transparent 17rem), rgba(0,0,0,.18); }
.hero-path-summary > div { display: grid; justify-items: center; min-width: 92px; }
.hero-path-summary strong { color: var(--profile-gold); font-size: 1.8rem; line-height: 1; }
.hero-path-summary span { margin-top: 5px; color: var(--profile-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.hero-path-summary p { margin: 0; color: var(--profile-muted); line-height: 1.52; }
.hero-path-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 16px; }
.hero-path-bars { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.hero-path-row { padding: 11px 12px; border: 1px solid rgba(236,205,142,.1); border-radius: 10px; background: rgba(0,0,0,.18); }
.hero-path-row__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.hero-path-row__head span { color: var(--profile-text); font-weight: 800; }
.hero-path-row__head b { color: var(--profile-gold); margin-right: 4px; }
.hero-path-row__head strong { color: var(--profile-gold); font-size: .8rem; white-space: nowrap; }
.hero-path-row > small { display: block; margin-top: 6px; color: var(--profile-muted); line-height: 1.38; }
.hero-path-bar { height: 7px; margin-top: 8px; overflow: hidden; border: 1px solid var(--hero-path-border, rgba(214,168,79,.18)); border-radius: 999px; background: rgba(0,0,0,.32); }
.hero-path-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hero-path-start, rgba(155,105,58,.9)), var(--hero-path-end, rgba(224,181,93,.95))); box-shadow: 0 0 10px var(--hero-path-glow, rgba(214,168,79,.2)); }
.hero-path-records { display: grid; align-content: start; gap: 8px; padding: 12px; border: 1px solid rgba(236,205,142,.1); border-radius: 10px; background: rgba(0,0,0,.2); }
.hero-path-records__title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(236,205,142,.1); }
.hero-path-records__title span { color: var(--profile-text); font-weight: 900; }
.hero-path-records__title small { color: var(--profile-muted); }
.hero-path-record { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(236,205,142,.08); }
.hero-path-record:first-of-type { border-top: 0; }
.hero-path-record strong, .hero-path-record small { display: block; }
.hero-path-record strong { color: var(--profile-text); }
.hero-path-record small { margin-top: 3px; color: var(--profile-muted); }
.hero-path-record > span { padding: 4px 7px; border: 1px solid rgba(214,168,79,.24); border-radius: 999px; color: var(--profile-gold); font-size: .72rem; }
@media (max-width: 980px) { .hero-path-layout { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .hero-path-bars { grid-template-columns: 1fr; } .hero-path-summary { grid-template-columns: 1fr; } .hero-path-summary > div { justify-items: start; } .hero-path-records__title { align-items: flex-start; flex-direction: column; } }

/* 0.10.25a194p1 – grafické ikony Cest hrdiny / hrdinky */
.hero-path-row__head > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hero-path-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-grid; place-items: center; border-radius: 8px; background: rgba(214,168,79,.055); }
.hero-path-icon img { display: block; width: 30px; height: 30px; object-fit: contain; }
.hero-path-icon > span,
.hero-path-icon--text { color: var(--profile-gold); font-weight: 900; font-size: 1rem; line-height: 1; }

/* 0.10.25a194p2 – tlumené barevné rozlišení přístupů Cest hrdiny/hrdinky */
.hero-path-row[data-approach="wit"] {
  --hero-path-start: #66577f;
  --hero-path-end: #9b86bd;
  --hero-path-border: rgba(155,134,189,.34);
  --hero-path-glow: rgba(155,134,189,.18);
}
.hero-path-row[data-approach="protection"] {
  --hero-path-start: #4f6875;
  --hero-path-end: #7898a7;
  --hero-path-border: rgba(120,152,167,.34);
  --hero-path-glow: rgba(120,152,167,.17);
}
.hero-path-row[data-approach="compassion"] {
  --hero-path-start: #744f58;
  --hero-path-end: #a87882;
  --hero-path-border: rgba(168,120,130,.32);
  --hero-path-glow: rgba(168,120,130,.16);
}
.hero-path-row[data-approach="duty"] {
  --hero-path-start: #78633c;
  --hero-path-end: #ad9157;
  --hero-path-border: rgba(173,145,87,.34);
  --hero-path-glow: rgba(173,145,87,.17);
}
.hero-path-row[data-approach="courage"] {
  --hero-path-start: #754b3d;
  --hero-path-end: #aa6a50;
  --hero-path-border: rgba(170,106,80,.34);
  --hero-path-glow: rgba(170,106,80,.17);
}
.hero-path-row[data-approach="pragmatism"] {
  --hero-path-start: #666440;
  --hero-path-end: #92905d;
  --hero-path-border: rgba(146,144,93,.32);
  --hero-path-glow: rgba(146,144,93,.16);
}


/* 0.10.25a194p5 – Tituly postavy */
.hero-active-title.rarity-rare { color: #82a9ce; }
.hero-title-trigger {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hero-title-trigger:hover,
.hero-title-trigger:focus-visible { background: rgba(255,255,255,.045); transform: translateY(-1px); }
.hero-title-trigger > span { opacity: .68; font-size: .75em; }
.hero-title-trigger--empty { color: var(--profile-muted); border-color: rgba(214,168,79,.2); }

.title-manager-panel { --modal-width: 760px; width: min(760px, calc(100vw - 24px)); }
.title-manager-head { padding-right: 42px; margin-bottom: 16px; }
.title-manager-head h2 { margin: 3px 0 6px; color: var(--profile-gold); }
.title-manager-head p:last-child { margin: 0; color: var(--profile-muted); }
.title-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.title-choice {
  --title-color: #c6b18b;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 92px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--title-color) 30%, rgba(255,255,255,.06));
  border-radius: 11px;
  color: var(--profile-text);
  text-align: left;
  background: rgba(0,0,0,.24);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.title-choice:hover,
.title-choice:focus-visible { border-color: color-mix(in srgb, var(--title-color) 62%, transparent); background: color-mix(in srgb, var(--title-color) 7%, rgba(0,0,0,.26)); transform: translateY(-1px); }
.title-choice.is-active { border-color: color-mix(in srgb, var(--title-color) 72%, transparent); background: color-mix(in srgb, var(--title-color) 10%, rgba(0,0,0,.28)); }
.title-choice.rarity-rare { --title-color: #82a9ce; }
.title-choice.rarity-epic { --title-color: #b48ae8; }
.title-choice.rarity-legendary { --title-color: #d9a657; }
.title-choice.rarity-mythic { --title-color: #d277ad; }
.title-choice__mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--title-color) 42%,transparent); border-radius:50%; color:var(--title-color); background:color-mix(in srgb,var(--title-color) 8%,transparent); }
.title-choice__copy { min-width:0; }
.title-choice__copy strong { display:block; color:var(--title-color); }
.title-choice__copy small { display:block; margin-top:3px; color:var(--profile-muted); font-size:.72rem; }
.title-choice__copy em { display:block; margin-top:6px; color:var(--profile-muted); font-size:.75rem; line-height:1.35; font-style:normal; }
.title-choice__state { align-self:start; padding:4px 7px; border:1px solid color-mix(in srgb,var(--title-color) 28%,transparent); border-radius:999px; color:var(--title-color); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.title-choice--none { --title-color: #9b968d; }
@media (max-width: 680px) { .title-choice-grid { grid-template-columns: 1fr; } .title-choice { grid-template-columns:auto minmax(0,1fr); } .title-choice__state { grid-column:2; justify-self:start; } }

/* 0.10.25a194p7h – ID spotřebních předmětů v detailu */
.profile-item-detail .item-detail-use-id{
  margin:12px 0 0;
  padding:9px 11px;
  border:1px solid var(--k-line);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  color:var(--k-muted);
}
.profile-item-detail .item-detail-use-id strong,
.profile-item-detail .item-detail-use-id code{color:var(--k-gold-2)}


/* 0.10.25a194p9 – skrytý ornament Znak tří cest */
.hero-name-row--sigil{position:relative;display:inline-flex;isolation:isolate;justify-content:center;max-width:100%;min-height:58px;padding:10px 44px;border-style:solid;border-color:transparent;border-width:0 42px;border-image-source:url('/assets/cosmetics/nameplate_ornaments/three_tracks_sigil.png');border-image-slice:0 180 fill;border-image-width:0 42px;border-image-repeat:stretch;filter:drop-shadow(0 4px 10px rgba(0,0,0,.42))}.hero-name-row--sigil .hero-name{position:relative;z-index:2;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.78)}@media(max-width:560px){.hero-name-row--sigil{padding-inline:28px;border-width:0 30px;border-image-width:0 30px}}

/* p27 – kompaktní profil hrdiny */
.profile-hero {
  min-height: 310px;
  align-items: stretch;
}

.profile-hero .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.hero-search {
  width: min(640px, 100%);
  margin-top: auto;
  padding-top: 24px;
  position: relative;
  z-index: 2;
}

.hero-search > label {
  display: block;
  margin-bottom: 7px;
  color: var(--profile-gold);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.hero-search__row input {
  min-width: 0;
  min-height: 41px;
  padding: 9px 12px;
  border: 1px solid rgba(236, 205, 142, .24);
  border-radius: 8px;
  color: var(--profile-text);
  background: rgba(3, 4, 4, .72);
  box-shadow: inset 0 0 16px rgba(0,0,0,.24);
  outline: none;
}

.hero-search__row input:focus {
  border-color: rgba(214, 168, 79, .72);
  box-shadow: 0 0 0 3px rgba(214,168,79,.09), inset 0 0 16px rgba(0,0,0,.24);
}

.hero-search .status-line {
  min-height: 1.2em;
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: .76rem;
}

.profile-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    'hero hero hero hero hero hero hero hero hero hero hero hero'
    'equipment equipment equipment equipment inventory inventory inventory inventory inventory inventory inventory inventory'
    'heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath'
    'achievements achievements achievements achievements achievements achievements trophies trophies trophies trophies trophies trophies'
    'combat combat combat combat combat combat combat activity activity activity activity activity';
  gap: 16px;
  margin-top: 14px;
  align-items: stretch;
}

.hero-card { grid-area: hero; }
.equipment-card { grid-area: equipment; }
.inventory-card { grid-area: inventory; }
.hero-path-card { grid-area: heroPath; }
.achievements-card { grid-area: achievements; }
.trophies-card { grid-area: trophies; }
.combat-card { grid-area: combat; }
.activity-card { grid-area: activity; }

.hero-card {
  min-height: 0;
  border-color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 44%, var(--profile-line));
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--class-color, #d6a84f) 13%, transparent), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--class-color, #d6a84f) 5%, transparent), transparent 62%),
    var(--profile-panel);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--class-color, #d6a84f) 7%, transparent),
    0 12px 32px rgba(0,0,0,.25);
}

.hero-content,
.hero-profile { height: auto; }

.hero-profile {
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.65fr);
  gap: 26px;
  align-items: stretch;
}

.hero-visual-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 10px;
  min-width: 0;
}

.hero-visual-column .portrait-frame {
  min-height: 330px;
  border-color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 52%, var(--profile-line));
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--class-color, #d6a84f) 18%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(58,43,26,.5), rgba(7,8,8,.94));
}

.hero-visual-column .portrait-frame img { min-height: 330px; }

.hero-showcase-slot {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 330px;
  padding: 14px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--class-color, var(--profile-gold)) 28%, var(--profile-line));
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--class-color, #d6a84f) 12%, transparent), transparent 8rem),
    rgba(0,0,0,.22);
  text-align: center;
}

.hero-showcase-slot::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--class-color, #d6a84f) 22%, transparent);
  border-radius: 10px;
  pointer-events: none;
}

.hero-showcase-slot img {
  position: absolute;
  inset: 14px 8px 58px;
  width: calc(100% - 16px);
  height: calc(100% - 72px);
  object-fit: contain;
  image-rendering: pixelated;
}

.hero-showcase-slot strong,
.hero-showcase-slot small,
.hero-showcase-slot > span:not(.hero-showcase-slot__standard) {
  position: relative;
  z-index: 2;
}

.hero-showcase-slot strong {
  color: var(--class-color, var(--profile-gold));
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.hero-showcase-slot small {
  margin-top: 4px;
  color: var(--profile-muted);
  font-size: .68rem;
  line-height: 1.35;
}

.hero-showcase-slot__standard {
  position: absolute;
  top: 46px;
  left: 50%;
  width: 3px;
  height: 150px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--class-color, #d6a84f) 62%, #5e4c35);
  opacity: .42;
  transform: translateX(-50%);
}

.hero-showcase-slot__standard::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 2px;
  width: 54px;
  height: 76px;
  clip-path: polygon(0 0, 100% 8%, 86% 100%, 0 86%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--class-color, #d6a84f) 32%, transparent), rgba(0,0,0,.18));
  border: 1px solid color-mix(in srgb, var(--class-color, #d6a84f) 34%, transparent);
}

.hero-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 4px;
}

.hero-class-link {
  width: fit-content;
  text-decoration: none;
}

.hero-class-link:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.hero-resource-grid .resource-tile {
  padding: 11px 12px;
  border-color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 24%, var(--profile-line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--class-color, #d6a84f) 6%, transparent), rgba(0,0,0,.18));
}

.hero-resource-grid .resource-head strong {
  color: var(--class-color, var(--profile-gold));
}

.hero-resource-grid .progress-track:not(.green):not(.gold) > span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--class-color, #d6a84f) 55%, #241b26), var(--class-color, #d6a84f));
}

.hero-world-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(104, 157, 171, .24);
  border-radius: 10px;
  color: var(--profile-text);
  background: rgba(63, 111, 124, .08);
  text-decoration: none;
}

.hero-world-summary > span { color: #8fbac5; font-weight: 800; }
.hero-world-summary > strong { color: #b8d6dd; }
.hero-world-summary > small { grid-column: 1 / -1; color: var(--profile-muted); }

.equipment-card,
.inventory-card,
.achievements-card,
.trophies-card,
.combat-card,
.activity-card { height: 100%; }

.equipment-grid { grid-template-columns: 1fr; }

.achievements-card {
  border-color: rgba(143,106,203,.24);
  background: radial-gradient(circle at 0 0, rgba(143,106,203,.08), transparent 18rem), var(--profile-panel);
}

.trophies-card {
  border-color: rgba(184,126,70,.24);
  background: radial-gradient(circle at 0 0, rgba(184,126,70,.08), transparent 18rem), var(--profile-panel);
}

.combat-card {
  border-color: rgba(177,71,64,.22);
  background: radial-gradient(circle at 0 0, rgba(177,71,64,.07), transparent 18rem), var(--profile-panel);
}

.activity-card {
  border-color: rgba(171,145,95,.22);
  background: radial-gradient(circle at 0 0, rgba(171,145,95,.07), transparent 18rem), var(--profile-panel);
}

@media (max-width: 1280px) {
  .hero-profile { grid-template-columns: minmax(230px, .82fr) minmax(0, 1.4fr); }
  .hero-visual-column { grid-template-columns: minmax(0, 1fr) 112px; }
  .profile-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'hero hero'
      'equipment inventory'
      'heroPath heroPath'
      'achievements trophies'
      'combat activity';
  }
  .combat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .profile-hero {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .hero-search { margin-top: 22px; }
  .hero-profile { grid-template-columns: 1fr; }
  .hero-visual-column { grid-template-columns: minmax(0, 1fr) 120px; }
  .profile-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      'hero'
      'equipment'
      'inventory'
      'heroPath'
      'achievements'
      'trophies'
      'combat'
      'activity';
  }
}

@media (max-width: 650px) {
  .hero-search__row { grid-template-columns: 1fr; }
  .hero-search__row .k-button { width: 100%; }
  .hero-visual-column { grid-template-columns: 1fr; }
  .hero-showcase-slot { min-height: 150px; }
  .hero-showcase-slot__standard { top: 20px; height: 70px; }
  .hero-showcase-slot__standard::before { width: 42px; height: 50px; }
  .hero-resource-grid { grid-template-columns: 1fr; }
}

/* === p28 · Profil hrdiny · kosmetická výbava a nový portrétní layout === */
.hero-profile {
  grid-template-columns: 220px minmax(270px, 320px) minmax(0, 1fr);
  grid-template-areas: 'cosmetics portrait identity';
  gap: 18px;
  align-items: stretch;
}

.hero-cosmetics-panel {
  grid-area: cosmetics;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--class-color, var(--profile-gold)) 24%, var(--profile-line));
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--class-color, #d6a84f) 10%, transparent), transparent 12rem),
    rgba(0, 0, 0, 0.24);
}

.hero-cosmetics-panel__title h3 {
  margin: 0;
  color: var(--profile-gold);
  font-size: .94rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hero-cosmetics-panel__title small {
  display: block;
  margin-top: 5px;
  color: var(--profile-muted);
  line-height: 1.45;
}

.hero-cosmetics-stack {
  display: grid;
  gap: 12px;
  min-height: 0;
  flex: 1;
}

.hero-cosmetic-slot {
  display: grid;
  grid-template-rows: auto minmax(92px, 1fr) auto;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--class-color, var(--profile-gold)) 18%, var(--profile-line));
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}

.hero-cosmetic-slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-cosmetic-slot__head span {
  color: var(--profile-text);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-cosmetic-slot__head small {
  color: var(--profile-muted);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-cosmetic-slot__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 104px;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.06), transparent 55%), rgba(0,0,0,.24);
}

.hero-cosmetic-slot__visual img {
  max-width: 100%;
  max-height: 108px;
  object-fit: contain;
  image-rendering: pixelated;
}

.hero-cosmetic-slot.is-standard .hero-cosmetic-slot__visual img {
  max-height: 120px;
}

.hero-cosmetic-slot__footer strong {
  display: block;
  color: var(--class-color, var(--profile-gold));
  font-size: .82rem;
  line-height: 1.3;
}

.hero-cosmetic-slot__footer small {
  display: block;
  margin-top: 3px;
  color: var(--profile-muted);
  font-size: .7rem;
  line-height: 1.45;
}

.hero-portrait-column {
  grid-area: portrait;
  display: flex;
  min-width: 0;
}

.hero-portrait-card {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--class-color, var(--profile-gold)) 34%, var(--profile-line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--class-color, #d6a84f) 14%, transparent), transparent 12rem),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.16));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 10px 26px rgba(0,0,0,.18);
}

button.hero-portrait-card {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.hero-portrait-card.is-editable:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 54%, var(--profile-line));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.24);
}

button.hero-portrait-card.is-editable:active {
  transform: translateY(1px) scale(.995);
}

.hero-portrait-display {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 560 / 760;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.07), transparent 36%),
    linear-gradient(180deg, rgba(47,34,23,.55), rgba(8,8,8,.92));
}

.hero-portrait-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.hero-portrait-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  image-rendering: pixelated;
}

.hero-portrait-display .portrait-fallback {
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
}

.hero-portrait-action {
  display: block;
  margin-top: 10px;
  color: var(--profile-muted);
  font-size: .74rem;
  text-align: center;
}

.hero-identity {
  grid-area: identity;
  justify-content: flex-start;
  padding: 6px 2px;
}

.hero-name {
  font-size: clamp(2rem, 3.6vw, 4rem);
}

.hero-meta {
  margin-top: 12px;
}

.hero-resource-grid {
  margin-top: 16px;
}

@media (max-width: 1280px) {
  .hero-profile {
    grid-template-columns: 206px minmax(242px, 292px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .hero-profile {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
    grid-template-areas:
      'cosmetics portrait'
      'identity identity';
  }
}

@media (max-width: 700px) {
  .hero-profile {
    grid-template-columns: 1fr;
    grid-template-areas:
      'cosmetics'
      'portrait'
      'identity';
  }

  .hero-cosmetics-stack {
    grid-template-columns: 1fr;
  }
}


/* === p29 · Kompaktní profil + testovací kosmetika Mistra cechu === */

.profile-hero {
  min-height: 310px;
}

.hero-card {
  padding: 16px 18px;
}

.hero-profile {
  grid-template-columns: 176px minmax(250px, 292px) minmax(0, 1fr);
  grid-template-areas: 'cosmetics portrait identity';
  gap: 18px;
  align-items: center;
}

/* Kosmetiky: menší výstavní panel bez zbytečných popisů. */
.hero-cosmetics-panel {
  grid-area: cosmetics;
  gap: 9px;
  padding: 10px;
  border-radius: 12px;
}

.hero-cosmetics-panel__title {
  min-height: 0;
}

.hero-cosmetics-panel__title .eyebrow {
  margin-bottom: 2px;
}

.hero-cosmetics-panel__title small {
  margin: 0;
  color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 76%, var(--profile-muted));
  font-size: .65rem;
  line-height: 1.3;
}

.hero-cosmetics-stack {
  gap: 9px;
}

.hero-cosmetic-slot {
  grid-template-rows: auto minmax(76px, auto) auto;
  gap: 5px;
  padding: 8px;
  min-height: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.hero-cosmetic-slot {
  cursor: pointer;
}

.hero-cosmetic-slot.is-editable:hover {
  border-color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 52%, var(--profile-line));
  background: color-mix(in srgb, var(--class-color, #d6a84f) 7%, rgba(0,0,0,.22));
  transform: translateY(-1px);
}

.hero-cosmetic-slot__head span {
  font-size: .7rem;
}

.hero-cosmetic-slot__head small {
  font-size: .61rem;
}

.hero-cosmetic-slot__visual {
  min-height: 78px;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.055), transparent 58%), rgba(0,0,0,.18);
}

.hero-cosmetic-slot.is-pet .hero-cosmetic-slot__visual {
  min-height: 84px;
}

.hero-cosmetic-slot.is-standard .hero-cosmetic-slot__visual {
  min-height: 118px;
}

.hero-cosmetic-slot__visual img {
  max-width: 100%;
  max-height: 82px;
}

.hero-cosmetic-slot.is-standard .hero-cosmetic-slot__visual img {
  max-height: 124px;
}

.hero-cosmetic-slot__footer strong {
  font-size: .74rem;
  line-height: 1.25;
}

.hero-cosmetic-empty {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: rgba(236,205,142,.28);
  font-size: 1.7rem;
}

/* Portrét: pouze obraz + kosmetický PNG frame. Žádný další "rám kolem rámu". */
.hero-portrait-column {
  grid-area: portrait;
  align-self: center;
}

.hero-portrait-card,
button.hero-portrait-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

button.hero-portrait-card.is-editable {
  cursor: pointer;
}

button.hero-portrait-card.is-editable:hover {
  transform: translateY(-2px);
  border: 0;
  box-shadow: none;
  filter: brightness(1.04);
}

button.hero-portrait-card.is-editable:active {
  transform: translateY(0);
}

.hero-portrait-display {
  width: 100%;
  aspect-ratio: 560 / 760;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--class-color, #d6a84f) 11%, transparent), transparent 45%),
    linear-gradient(180deg, rgba(40,31,22,.34), rgba(7,8,8,.25));
  box-shadow: none;
}

.hero-portrait-action {
  margin-top: 5px;
  color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 68%, var(--profile-muted));
  font-size: .67rem;
}

/* Informace hrdiny jsou výrazně kompaktnější. */
.hero-identity {
  grid-area: identity;
  justify-content: center;
  padding: 0;
}

.hero-kicker {
  margin-bottom: 4px;
}

.hero-name {
  margin-bottom: 5px;
  font-size: clamp(2rem, 3.4vw, 3.8rem);
}

.hero-subtitle {
  margin-top: 4px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  margin-top: 8px;
  color: var(--profile-muted);
  font-size: .74rem;
}

.hero-meta span {
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-meta strong {
  color: var(--profile-text);
  font-weight: 700;
}

.hero-class-bonuses {
  margin-top: 8px;
}

/* Nové kompaktní statistiky. */
.hero-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.hero-progress-card,
.hero-mini-card {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--profile-line);
  border-radius: 9px;
  background: rgba(0,0,0,.2);
}

.hero-progress-card.is-wide {
  grid-column: 1 / -1;
}

.hero-progress-card__head,
.hero-mini-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.hero-progress-card__head span,
.hero-mini-card span,
.hero-mini-card__head span {
  color: var(--profile-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hero-progress-card__head strong,
.hero-mini-card strong,
.hero-mini-card__head strong {
  color: var(--profile-text);
  font-size: .86rem;
  white-space: nowrap;
}

.hero-progress-card > small {
  display: block;
  margin-top: 4px;
  color: var(--profile-muted);
  font-size: .66rem;
}

.hero-progress-track {
  overflow: hidden;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.hero-progress-track > span {
  display: block;
  width: var(--value, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* XP = modrofialová, reputace = jantarová, výdrž = zelená. */
.hero-progress-card.tone-xp {
  border-color: rgba(111, 111, 209, .27);
}
.hero-progress-card.tone-xp .hero-progress-card__head strong { color: #b4aff2; }
.hero-progress-card.tone-xp .hero-progress-track > span {
  background: linear-gradient(90deg, #526ca8, #8a64c2);
}

.hero-progress-card.tone-reputation {
  border-color: rgba(214,168,79,.27);
}
.hero-progress-card.tone-reputation .hero-progress-card__head strong { color: #e7c46e; }
.hero-progress-card.tone-reputation .hero-progress-track > span {
  background: linear-gradient(90deg, #8e621f, #e2b44d);
}

.hero-progress-card.tone-stamina {
  border-color: rgba(106,164,92,.27);
}
.hero-progress-card.tone-stamina .hero-progress-card__head strong { color: #a6d786; }
.hero-progress-card.tone-stamina .hero-progress-track > span {
  background: linear-gradient(90deg, #4c7d45, #88c875);
}

.hero-crowns-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 45px;
  border-color: rgba(214,168,79,.22);
}

.hero-crowns-card strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e9c86f;
  font-size: 1rem;
}

.hero-crowns-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}

.hero-world-mini {
  display: block;
  min-height: 45px;
  border-color: rgba(99,164,177,.24);
  color: inherit;
  text-decoration: none;
  background: rgba(45,102,113,.07);
}

.hero-world-mini .hero-mini-card__head strong {
  color: #acd2d9;
}

.hero-world-mini .hero-progress-track {
  height: 5px;
  margin-top: 5px;
}

.hero-world-mini .hero-progress-track > span {
  background: linear-gradient(90deg, #397d8a, #77bdc7);
}

/* Starý samostatný world box už nový layout nepoužívá. */
.hero-world-summary {
  display: none;
}

/* Výběr vzhledu. */
.profile-appearance-panel {
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
  max-height: min(88vh, 900px);
  overflow: auto;
}

.profile-appearance-head {
  padding-right: 36px;
}

.profile-appearance-head h2 {
  margin-bottom: 8px;
  color: var(--profile-gold);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.profile-appearance-head p:last-child {
  max-width: 850px;
  color: var(--profile-muted);
  line-height: 1.55;
}

.appearance-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--profile-line);
}

.appearance-tab {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--profile-line);
  border-radius: 8px;
  color: var(--profile-muted);
  background: rgba(255,255,255,.025);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.appearance-tab small {
  margin-left: 5px;
  opacity: .7;
}

.appearance-tab:hover,
.appearance-tab.is-active {
  color: var(--profile-text);
  border-color: rgba(214,168,79,.46);
  background: rgba(214,168,79,.08);
}

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

.appearance-grid--portrait,
.appearance-grid--frame {
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}

.appearance-choice {
  display: grid;
  grid-template-rows: minmax(106px, 1fr) auto auto;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--profile-line);
  border-radius: 10px;
  color: var(--profile-text);
  background: rgba(0,0,0,.2);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.appearance-choice:hover {
  border-color: rgba(214,168,79,.43);
  transform: translateY(-1px);
}

.appearance-choice.is-active {
  border-color: rgba(214,168,79,.72);
  background: rgba(214,168,79,.09);
  box-shadow: inset 0 0 0 1px rgba(214,168,79,.14);
}

.appearance-choice__visual {
  display: grid;
  place-items: center;
  min-height: 106px;
  overflow: hidden;
  border-radius: 7px;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 60%), rgba(0,0,0,.28);
}

.appearance-choice__visual img {
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
  image-rendering: pixelated;
}

.appearance-choice.is-portrait .appearance-choice__visual,
.appearance-choice.is-frame .appearance-choice__visual {
  aspect-ratio: 560 / 760;
}

.appearance-choice.is-portrait .appearance-choice__visual img,
.appearance-choice.is-frame .appearance-choice__visual img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.appearance-choice.is-standard .appearance-choice__visual {
  min-height: 150px;
}

.appearance-choice.is-standard .appearance-choice__visual img {
  max-height: 170px;
}

.appearance-choice__empty {
  color: rgba(236,205,142,.38);
  font-size: 2.4rem;
}

.appearance-choice__name {
  overflow: hidden;
  color: var(--profile-text);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.appearance-choice small {
  color: var(--profile-muted);
  font-size: .65rem;
}

.appearance-choice.is-active small {
  color: var(--profile-gold);
}

.appearance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--profile-line);
}

.appearance-footer > small {
  color: var(--profile-muted);
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .hero-profile {
    grid-template-columns: 164px minmax(230px, 275px) minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .profile-hero {
    min-height: 280px;
  }

  .hero-profile {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
    grid-template-areas:
      'cosmetics portrait'
      'identity identity';
    align-items: start;
  }

  .hero-cosmetics-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .profile-hero {
    min-height: 0;
  }

  .hero-profile {
    grid-template-columns: 1fr;
    grid-template-areas:
      'portrait'
      'cosmetics'
      'identity';
  }

  .hero-portrait-column {
    width: min(300px, 100%);
    margin: 0 auto;
  }

  .hero-cosmetics-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-resource-grid {
    grid-template-columns: 1fr;
  }

  .hero-progress-card.is-wide {
    grid-column: auto;
  }

  .appearance-grid,
  .appearance-grid--portrait,
  .appearance-grid--frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearance-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

/* === p29b hotfix · portrét a rámeček === */
.hero-portrait-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero-portrait-display {
  overflow: visible;
}

.hero-portrait-visual {
  width: 100%;
  height: 100%;
}

.hero-portrait-frame-overlay {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  max-width: none;
  transform: translate(-50%, -50%);
}

.hero-portrait-action {
  display: none !important;
}

/* === p29d · Portrét hover – statický portrét + class glow === */
.hero-portrait-card {
  position: relative;
}

button.hero-portrait-card.is-editable:hover,
button.hero-portrait-card.is-editable:focus-visible,
button.hero-portrait-card.is-editable:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.hero-portrait-display::before {
  content: '';
  position: absolute;
  inset: 4%;
  z-index: 0;
  pointer-events: none;
  border-radius: 20px;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--class-color, #d6a84f) 32%, transparent) 0%,
      color-mix(in srgb, var(--class-color, #d6a84f) 15%, transparent) 45%,
      transparent 72%
    );
  filter: blur(18px);
  opacity: 0;
  transform: scale(.94);
  transition: opacity 220ms ease, transform 260ms ease;
}

.hero-portrait-card.is-editable:hover .hero-portrait-display::before,
.hero-portrait-card.is-editable:focus-visible .hero-portrait-display::before {
  opacity: .8;
  transform: scale(1.04);
}

/* === p29f · Safe-area portrétu podle skutečné geometrie rámečku === */
.hero-portrait-display {
  --portrait-safe-top: 0px;
  --portrait-safe-right: 0px;
  --portrait-safe-bottom: 0px;
  --portrait-safe-left: 0px;
}

.hero-portrait-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  clip-path: inset(
    var(--portrait-safe-top)
    var(--portrait-safe-right)
    var(--portrait-safe-bottom)
    var(--portrait-safe-left)
  );
  pointer-events: none;
}

.hero-portrait-viewport .hero-portrait-visual {
  width: 95%;
  height: 95%;
}

.hero-portrait-viewport .portrait-fallback {
  position: relative;
  z-index: 1;
}


.profile-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    'equipment equipment equipment hero hero hero hero hero hero hero hero hero'
    'inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory'
    'heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath'
    'achievements achievements achievements achievements achievements achievements trophies trophies trophies trophies trophies trophies'
    'combat combat combat combat combat combat combat activity activity activity activity activity';
  align-items: stretch;
}

.equipment-card,
.hero-card {
  height: 100%;
  min-height: 0;
}

.equipment-card {
  display: flex;
  flex-direction: column;
}

.equipment-card .section-heading {
  flex: 0 0 auto;
}

.equipment-card .equipment-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.equipment-card .equipment-slot {
  align-content: center;
  height: 100%;
  min-height: 0;
}

.total-stats {
  display: none !important;
}

.inventory-card {
  width: 100%;
}

.hero-profile {
  display: grid;
  grid-template-columns: minmax(390px, 450px) minmax(0, 1fr);
  grid-template-areas: 'visual identity';
  gap: 20px;
  align-items: center;
}

.hero-visual-group {
  grid-area: visual;
  display: grid;
  grid-template-columns: minmax(118px, 142px) minmax(240px, 292px);
  gap: 16px;
  align-items: stretch;
  align-self: center;
  justify-content: start;
  min-width: 0;
}

.hero-cosmetics-showcase {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: visible;
}

.hero-standard-display,
.hero-pet-display {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

button.hero-standard-display,
button.hero-pet-display {
  cursor: pointer;
}

.hero-standard-display {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-standard-display img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.42));
  transition: filter .16s ease, transform .16s ease;
}

.hero-standard-display.is-editable:hover img,
.hero-standard-display.is-editable:focus-visible img {
  filter: brightness(1.08) drop-shadow(0 8px 12px rgba(0,0,0,.48));
  transform: translateY(-1px);
}

.hero-standard-placeholder {
  position: absolute;
  inset: 8% 18% 4%;
  opacity: .16;
  pointer-events: none;
}

.hero-standard-placeholder::before {
  content: '';
  position: absolute;
  top: 2%;
  bottom: 0;
  left: 45%;
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--class-color, var(--profile-gold)) 58%, #4c4032);
}

.hero-standard-placeholder::after {
  content: '';
  position: absolute;
  top: 12%;
  left: 47%;
  width: 48%;
  height: 36%;
  clip-path: polygon(0 0, 100% 8%, 84% 100%, 0 86%);
  background: color-mix(in srgb, var(--class-color, var(--profile-gold)) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--class-color, var(--profile-gold)) 45%, transparent);
}

.hero-pet-display {
  position: absolute;
  right: -5%;
  bottom: -2px;
  left: -5%;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 122px;
  overflow: visible;
}

.hero-pet-display img {
  display: block;
  max-width: 108%;
  max-height: 120px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 8px rgba(0,0,0,.58));
  transform-origin: center bottom;
  transition: filter .16s ease, transform .16s ease;
}

.hero-pet-display.is-editable:hover img,
.hero-pet-display.is-editable:focus-visible img {
  filter: brightness(1.08) drop-shadow(0 8px 10px rgba(0,0,0,.62));
  transform: scale(var(--pet-scale,1));
}

.hero-pet-placeholder {
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 45%, transparent);
  font-size: 1.45rem;
  opacity: .22;
  pointer-events: none;
}

.hero-cosmetics-panel,
.hero-cosmetics-stack,
.hero-cosmetic-slot {
  display: none !important;
}

.hero-portrait-column {
  grid-area: auto;
  align-self: stretch;
  min-width: 0;
}

.hero-identity {
  grid-area: identity;
  justify-content: center;
}

.hero-title-trigger {
  margin-top: 1px;
  padding: 1px 0 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hero-title-trigger:hover,
.hero-title-trigger:focus-visible {
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  transform: none;
}

.hero-title-trigger--empty {
  border: 0;
}

.hero-class-icon {
  width: 42px;
  height: 42px;
}

.hero-class-link {
  gap: 9px;
  min-height: 42px;
}

@media (max-width: 1180px) {
  .profile-layout {
    grid-template-areas:
      'hero hero hero hero hero hero hero hero hero hero hero hero'
      'equipment equipment equipment equipment equipment equipment equipment equipment equipment equipment equipment equipment'
      'inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory'
      'heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath'
      'achievements achievements achievements achievements achievements achievements trophies trophies trophies trophies trophies trophies'
      'combat combat combat combat combat combat combat activity activity activity activity activity';
  }

  .equipment-card .equipment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }

  .hero-profile {
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  }

  .hero-visual-group {
    grid-template-columns: minmax(108px, 132px) minmax(230px, 275px);
    gap: 12px;
  }
}

@media (max-width: 900px) {
  .hero-profile {
    grid-template-columns: 1fr;
    grid-template-areas:
      'visual'
      'identity';
    justify-items: center;
  }

  .hero-visual-group {
    width: min(430px, 100%);
  }

  .hero-identity {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .equipment-card .equipment-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }

  .hero-visual-group {
    grid-template-columns: minmax(82px, 104px) minmax(0, 270px);
    gap: 10px;
    justify-content: center;
  }

  .hero-pet-display {
    height: 92px;
  }

  .hero-pet-display img {
    max-height: 90px;
  }

  .hero-class-icon {
    width: 36px;
    height: 36px;
  }
}

.profile-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    'hero hero hero hero hero hero hero hero hero hero hero hero'
    'inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory inventory'
    'heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath heroPath'
    'achievements achievements achievements achievements achievements achievements trophies trophies trophies trophies trophies trophies'
    'combat combat combat combat combat combat combat activity activity activity activity activity';
}

.hero-card {
  padding: 0;
  overflow: visible;
}

.hero-combined-layout {
  display: grid;
  grid-template-columns: minmax(238px, 275px) minmax(0, 1fr);
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.hero-equipment-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 14px;
  border-right: 1px solid color-mix(in srgb, var(--class-color, var(--profile-gold)) 26%, var(--profile-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--class-color, #d6a84f) 5%, transparent), transparent 92%),
    rgba(0,0,0,.08);
}

.hero-equipment-heading {
  flex: 0 0 auto;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--class-color, var(--profile-gold)) 18%, var(--profile-line));
}

.hero-equipment-heading h2 {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
}

.hero-equipment-section .equipment-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-height: 0;
}

.hero-equipment-section .equipment-slot {
  align-content: center;
  height: 100%;
  min-height: 0;
  padding: 10px;
  border-color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 16%, var(--profile-line));
  background: rgba(0,0,0,.16);
  box-shadow: none;
}

.hero-equipment-section .equipment-slot--interactive:hover,
.hero-equipment-section .equipment-slot--interactive:focus-visible {
  border-color: color-mix(in srgb, var(--class-color, var(--profile-gold)) 52%, var(--profile-line));
}

.hero-content {
  min-width: 0;
  padding: 16px 18px;
}

.appearance-choice.is-pet .appearance-choice__visual {
  min-height: 130px;
}
.appearance-choice.is-pet .appearance-choice__visual img {
  max-height: 125px;
}

@media (max-width: 1180px) {
  .hero-combined-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .hero-equipment-section {
    padding-inline: 11px;
  }
  .hero-equipment-section .equipment-slot {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }
  .hero-equipment-section .item-icon {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 980px) {
  .hero-combined-layout {
    grid-template-columns: 1fr;
  }
  .hero-content {
    order: 1;
  }
  .hero-equipment-section {
    order: 2;
    border-top: 1px solid color-mix(in srgb, var(--class-color, var(--profile-gold)) 26%, var(--profile-line));
    border-right: 0;
  }
  .hero-equipment-section .equipment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }
}

@media (max-width: 700px) {
  .hero-equipment-section .equipment-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }
}


.hero-combined-layout {
  grid-template-columns: minmax(620px, 700px) minmax(0, 1fr);
  gap: 12px;
}

.hero-equipment-section {
  padding: 16px 12px 16px 18px;
  border-right: 0;
  background: transparent;
}

.hero-equipment-heading {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.hero-equipment-section .equipment-grid {
  gap: 11px;
}

.hero-equipment-section .equipment-slot {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 18px;
}

.hero-equipment-section .item-icon {
  width: 86px;
  height: 86px;
}

.hero-content {
  padding-left: 34px;
}

.hero-equipment-section .item-label {
  white-space: nowrap;
}

.hero-equipment-section .item-name {
  white-space: nowrap;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.hero-equipment-section .item-meta {
  font-size: 0.76rem;
}
.hero-equipment-section .equipment-slot {
  min-height: 108px;
  align-items: center;
}

.hero-equipment-section .item-label,
.hero-equipment-section .item-name,
.hero-equipment-section .item-meta {
  max-width: 100%;
}

.hero-equipment-section .item-icon {
  flex: 0 0 86px;
}


@media (max-width: 1180px) {
  .hero-combined-layout {
    grid-template-columns: minmax(520px, 580px) minmax(0, 1fr);
    gap: 10px;
  }
  .hero-equipment-section {
    padding-left: 14px;
    padding-right: 4px;
  }
  .hero-equipment-section .equipment-slot {
    grid-template-columns: 74px minmax(0, 1fr);
  }
  .hero-equipment-section .item-icon {
    width: 74px;
    height: 74px;
  }
}

@media (max-width: 980px) {
  .hero-combined-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-equipment-section {
    border-top: 0;
    padding: 10px 16px 16px;
  }
}


/* === p29s · Rebalance horního profilu ===
   Skutečná horizontální šířka výzbroje + centrovanější portrét + kompaktnější pravá část. */
.hero-combined-layout {
  grid-template-columns: minmax(390px, 410px) minmax(0, 1fr);
  gap: 0;
}

.hero-equipment-section {
  width: 100%;
  min-width: 0;
  padding: 16px 10px 16px 18px;
}

.hero-equipment-section .equipment-grid {
  width: 100%;
  gap: 10px;
}

.hero-equipment-section .equipment-slot {
  width: 100%;
  min-width: 0;
  min-height: 100px;
  box-sizing: border-box;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 13px;
  padding: 10px 15px;
  align-items: center;
}

.hero-equipment-section .equipment-slot > div:last-child {
  min-width: 0;
}

.hero-equipment-section .item-icon {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
}

.hero-equipment-section .item-name {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .92rem;
  letter-spacing: -.01em;
}

/* Pravý profil už nebere všechen zbývající prostor. Tím jsou progress bary kratší. */
.hero-content {
  min-width: 0;
  padding: 14px 18px 14px 18px;
}

.hero-profile {
  width: 100%;
  grid-template-columns: minmax(410px, 440px) minmax(500px, 590px);
  gap: 18px;
  justify-content: center;
  align-items: center;
}

/* Standarta + pet jsou blíž portrétu; portrét se tak posune opticky víc do středu karty. */
.hero-visual-group {
  width: 100%;
  grid-template-columns: minmax(108px, 120px) minmax(270px, 292px);
  gap: 6px;
  justify-content: center;
  align-items: stretch;
}

.hero-cosmetics-showcase {
  transform: translateX(6px);
}

.hero-pet-display {
  right: -8%;
  left: -8%;
}

.hero-identity {
  width: 100%;
  max-width: 590px;
  justify-self: end;
}

.hero-resource-grid {
  width: 100%;
}

/* Středně široké monitory: zachovat stejnou logiku bez přetékání. */
@media (max-width: 1360px) and (min-width: 981px) {
  .hero-combined-layout {
    grid-template-columns: minmax(350px, 370px) minmax(0, 1fr);
  }

  .hero-equipment-section .equipment-slot {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 11px;
    padding-inline: 12px;
  }

  .hero-equipment-section .item-icon {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
  }

  .hero-equipment-section .item-name {
    font-size: .86rem;
  }

  .hero-profile {
    grid-template-columns: minmax(360px, 400px) minmax(430px, 1fr);
    gap: 12px;
  }

  .hero-visual-group {
    grid-template-columns: minmax(92px, 106px) minmax(248px, 280px);
    gap: 4px;
  }

  .hero-identity {
    max-width: 540px;
  }
}

@media (max-width: 980px) {
  .hero-combined-layout {
    grid-template-columns: 1fr;
  }

  .hero-equipment-section {
    padding: 10px 16px 16px;
  }

  .hero-equipment-section .equipment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }

  .hero-profile {
    grid-template-columns: 1fr;
    grid-template-areas: 'visual' 'identity';
  }

  .hero-identity {
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 700px) {
  .hero-equipment-section .equipment-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }
}

/* === p29t · Standarta + pet: vycentrování mezi výzbroj a portrét === */
/*
 * Širší sloupec standarty dovolí původnímu vysokému assetu využít celou
 * výšku portrétního rámu. Větší mezera ji zároveň odlepí od portrétu.
 */
.hero-profile {
  grid-template-columns: minmax(470px, 490px) minmax(500px, 590px);
}

.hero-visual-group {
  grid-template-columns: minmax(150px, 158px) minmax(270px, 292px);
  gap: 24px;
  justify-content: center;
}

.hero-cosmetics-showcase {
  transform: translateX(-12px);
}

.hero-standard-display img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Pet se hýbe společně se standartou, takže zůstává u jejího spodku. */
.hero-pet-display {
  right: -4%;
  left: -4%;
}

@media (max-width: 1360px) and (min-width: 981px) {
  .hero-profile {
    grid-template-columns: minmax(420px, 440px) minmax(430px, 1fr);
  }

  .hero-visual-group {
    grid-template-columns: minmax(128px, 136px) minmax(248px, 280px);
    gap: 18px;
  }

  .hero-cosmetics-showcase {
    transform: translateX(-8px);
  }
}

@media (max-width: 980px) {
  .hero-cosmetics-showcase {
    transform: none;
  }
}

.hero-name-row {
  align-items: baseline;
  column-gap: 12px;
  row-gap: 5px;
}

.hero-name-row .hero-name {
  flex: 0 0 auto;
}

.hero-active-title--inline {
  display: inline-flex;
  align-items: center;
  align-self: baseline;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.15;
  white-space: nowrap;
}

.hero-title-trigger.hero-active-title--inline {
  margin: 0;
  padding: 1px 0 2px;
}

.hero-title-trigger--empty.hero-active-title--inline {
  font-size: .94rem;
}

.inventory-card[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .hero-name-row {
    align-items: center;
  }

  .hero-active-title--inline {
    font-size: .92rem;
  }
}


/* === p29v · peti + titul pod jménem + větší ikonka třídy === */
.hero-profile{grid-template-columns:minmax(0, 620px) minmax(0, 700px);gap:22px;align-items:center;}
.hero-visual-group{grid-template-columns:minmax(0,166px) minmax(0,292px);gap:18px;justify-content:center;align-items:stretch;}
.hero-cosmetics-showcase{transform:translateX(-8px);}
.hero-standard-display img{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom;}
.hero-pet-display{left:-18%;right:10%;bottom:-2px;height:126px;justify-content:flex-start;transform:translate(var(--pet-x,0px),var(--pet-y,0px));}
.hero-pet-display img{max-width:115%;max-height:122px;object-position:left bottom;transform:scale(var(--pet-scale,1));}
.hero-identity{min-width:0;max-width:700px;justify-self:stretch;padding:8px 4px;}
.hero-name-row{align-items:flex-end;column-gap:12px;row-gap:4px;}
.hero-name-row .hero-name{flex:0 1 auto;margin:0;}
.hero-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 6px;}
.hero-title-row .hero-active-title,.hero-title-row .hero-title-trigger{font-size:1.08rem;line-height:1.16;}
.hero-title-row .hero-title-trigger{padding:2px 0 3px;}
.hero-title-row .hero-title-trigger--empty{font-size:1rem;}
.hero-class-meta-stack{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-areas:"icon class" "icon meta";column-gap:14px;row-gap:3px;align-items:center;margin-top:2px;}
.hero-class-meta-icon{grid-area:icon;display:flex;align-items:center;justify-content:center;align-self:stretch;}
.hero-class-icon.hero-class-icon--stack{width:58px;height:58px;flex:0 0 58px;border-radius:16px;}
.hero-class-link.hero-class-link--stack{grid-area:class;margin-top:0;min-height:auto;gap:0;padding:0;text-decoration:none;display:flex;align-items:center;flex-wrap:wrap;}
.hero-class-link.hero-class-link--stack strong{margin-right:6px;}
.hero-meta.hero-meta--stack{grid-area:meta;margin-top:0;gap:6px 18px;}
.hero-resource-grid{margin-top:14px;}
@media (max-width:1360px) and (min-width:981px){.hero-profile{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "identity";gap:16px;}.hero-visual-group{grid-template-columns:minmax(132px,146px) minmax(250px,282px);gap:14px;}.hero-class-meta-stack{grid-template-columns:54px minmax(0,1fr);column-gap:12px;}.hero-class-icon.hero-class-icon--stack{width:52px;height:52px;}.hero-pet-display{left:-14%;right:6%;}}
@media (max-width:980px){.hero-profile{grid-template-columns:1fr;grid-template-areas:"visual" "identity";}.hero-identity{max-width:none;justify-self:stretch;}.hero-cosmetics-showcase{transform:none;}.hero-class-meta-stack{grid-template-columns:48px minmax(0,1fr);}.hero-class-icon.hero-class-icon--stack{width:46px;height:46px;}.hero-pet-display{left:-8%;right:-4%;justify-content:center;}}

/* Keep the visual group inside the narrow profile column without changing portrait calibration. */
@media (max-width:700px){.hero-visual-group{grid-template-columns:minmax(0,104px) minmax(0,270px);gap:14px;}}

/* p37b · zachovat ruční scale peta i při hoveru */
.hero-pet-display.is-editable:hover img,.hero-pet-display.is-editable:focus-visible img{transform:scale(var(--pet-scale,1));}


.appearance-grid--skin .appearance-choice__visual {
  min-height: 10rem;
}

.appearance-choice.is-skin img {
  image-rendering: pixelated;
  width: auto;
  max-width: 100%;
  max-height: 9.5rem;
}

/* p46 · pet hover/focus nesmí přepsat ručně kalibrovanou X/Y pozici */
button.hero-pet-display.is-editable:hover,
button.hero-pet-display.is-editable:focus-visible,
button.hero-pet-display.is-editable:active {
  transform: translate(var(--pet-x, 0px), var(--pet-y, 0px));
}

button.hero-pet-display.is-editable:hover img,
button.hero-pet-display.is-editable:focus-visible img,
button.hero-pet-display.is-editable:active img {
  transform: scale(var(--pet-scale, 1));
}

/* Player nameplate appearance: compact canonical ornament with one visible name. */
.hero-name-row--ornament {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(100%, 420px);
  max-width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.42));
}

button.hero-name-row--ornament {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  background: transparent;
}

.hero-name-row--ornament.is-editable {
  cursor: pointer;
}

.hero-name-row--ornament.is-editable .hero-nameplate-art {
  transition: filter .16s ease;
}

.hero-name-row--ornament.is-editable:hover .hero-nameplate-art,
.hero-name-row--ornament.is-editable:focus-visible .hero-nameplate-art {
  filter: drop-shadow(0 0 7px rgba(232,204,139,.26))
    drop-shadow(0 0 14px rgba(209,176,103,.18));
}

.hero-name-row--ornament.is-editable:focus-visible {
  outline: none;
}

.hero-nameplate-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.hero-name-row--ornament .hero-name {
  position: relative;
  z-index: 1;
  width: 74%;
  max-width: 74%;
  margin: 0;
  color: var(--profile-text);
  font-size: var(--profile-name-font-size, 42px);
  line-height: 1;
  letter-spacing: -.025em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.82);
  white-space: nowrap;
}

.appearance-grid--nameplate {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.appearance-choice.is-nameplate .appearance-choice__visual {
  min-height: 96px;
}

.appearance-choice.is-nameplate .appearance-choice__visual img {
  width: 100%;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 560px) {
  .hero-name-row--ornament {
    width: min(100%, 360px);
  }
}

/* The portrait/frame silhouette owns the visible stage; keep crop geometry intact. */
.hero-portrait-card,
.hero-portrait-display {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}