/*
 * Hero profile — same visual language as the world map / app chrome.
 * Paperdoll: full-body class×gender art with equipment slots on the sides.
 */

body.tida-app-page.tida-profile-page .tida-page-hero {
  display: none !important;
}

body.tida-profile-page .tida-legacy-nav,
.profile-sheet .tida-legacy-nav {
  display: none !important;
}

.profile-sheet {
  position: relative;
  margin: 0;
  padding: 0 0 18px;
  color: #e8e0d0;
  background:
    radial-gradient(ellipse at 50% 0%, #243038 0%, transparent 55%),
    linear-gradient(180deg, #151c24 0%, #0d1218 100%);
}

.profile-identity {
  display: grid;
  gap: 6px;
  padding: 14px 16px 8px;
  text-align: center;
}

.profile-identity-name {
  margin: 0;
  color: #f4e9d5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px #000a;
}

.profile-identity-name a,
.profile-identity-name a font,
.profile-identity-name font {
  color: inherit !important;
  text-decoration: none;
}

.profile-identity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  color: #c9b17a;
  font-size: 12px;
}

.profile-identity-meta .profile-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  color: #f3deb5;
  background: #121b22;
  border: 1px solid #af8b4b;
  border-radius: 999px;
  font: 13px Georgia, serif;
}

.profile-identity-rank {
  color: #d5b679;
  font-size: 11px;
  letter-spacing: .04em;
}

.profile-xp {
  margin: 4px 14px 12px;
  padding: 8px 10px 10px;
  background: linear-gradient(160deg, #1b2730, #0d141b);
  border: 1px solid #766344;
  border-radius: 8px;
  box-shadow: 0 2px 12px #0006;
}

.profile-xp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: #a7b3b7;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-xp-top b {
  color: #f3deb5;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.profile-xp-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  background: #091016;
  border: 1px solid #4a4d47;
  border-radius: 4px;
}

.profile-xp-track > i {
  display: block;
  height: 100%;
  background: linear-gradient(#d5b679, #8a6a32);
  box-shadow: inset 0 1px #f5e0a866;
}

/* —— Paperdoll —— */
.profile-doll {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: stretch;
  margin: 0 10px 14px;
  padding: 10px 8px;
  background: linear-gradient(160deg, #1b2730, #0d141b);
  border: 1px solid #766344;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #2c2419, 0 4px 18px #0008;
}

.profile-doll-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.profile-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 4px;
  color: #a7b3b7;
  text-decoration: none;
  background: linear-gradient(140deg, #28323be8, #0d141cea);
  border: 1px solid #79684b;
  border-radius: 9px;
  box-shadow: inset 0 1px #d7c49b18, 0 2px 8px #0006;
  overflow: hidden;
}

.profile-slot img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.profile-slot:not(.is-filled) img {
  opacity: .28;
  filter: grayscale(1);
}

.profile-slot span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  padding: 0 2px;
  color: #d5c6a5;
  font-size: 7px;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.profile-slot.is-filled {
  border-color: #bd9a5b;
  box-shadow: inset 0 0 0 1px #3a2e20, 0 0 10px #c9a35a33;
}

.profile-slot:hover {
  border-color: #d5b679;
  color: #f4e9d5;
}

.profile-doll-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 280px;
  padding: 8px 4px 28px;
  background: #0d1218;
  border: 1px solid #5a4e3a;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}

.profile-doll-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.04);
  animation: profile-bg-ken 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.profile-doll-glow {
  position: absolute;
  z-index: 0;
  left: 18%;
  right: 18%;
  top: 8%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d5b67933 0%, #40edd214 45%, transparent 72%);
  mix-blend-mode: screen;
  animation: profile-glow-breathe 5.5s ease-in-out infinite;
  pointer-events: none;
}

.profile-doll-mist {
  position: absolute;
  z-index: 1;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 38%;
  background:
    linear-gradient(180deg, transparent 0%, #10171caa 55%, #0d1218d0 100%),
    radial-gradient(ellipse at 30% 80%, #a7c4b833 0%, transparent 55%),
    radial-gradient(ellipse at 70% 90%, #c9b17a22 0%, transparent 50%);
  animation: profile-mist-drift 9s ease-in-out infinite alternate;
  pointer-events: none;
}

.profile-doll-ember {
  position: absolute;
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e7e6b3;
  box-shadow: 0 0 8px 2px #e3bd7577;
  animation: profile-ember-drift 7s ease-in-out infinite alternate;
  pointer-events: none;
}

.profile-doll-ember--one { top: 28%; left: 22%; }
.profile-doll-ember--two { top: 48%; left: 72%; animation-delay: -2.4s; animation-duration: 8.5s; }
.profile-doll-ember--three { top: 62%; left: 34%; animation-delay: -4.2s; width: 2px; height: 2px; }
.profile-doll-ember--four { top: 18%; left: 58%; animation-delay: -1.1s; animation-duration: 6.2s; background: #b6eeeb; box-shadow: 0 0 8px 2px #65ffff55; }

.profile-doll[data-class="mage"] .profile-doll-glow {
  background: radial-gradient(ellipse, #7ec8ff33 0%, #40edd220 45%, transparent 72%);
}

.profile-doll[data-class="bandit"] .profile-doll-glow {
  background: radial-gradient(ellipse, #c98bff33 0%, #d5b67918 45%, transparent 72%);
}

.profile-doll[data-class="warrior"] .profile-doll-glow {
  background: radial-gradient(ellipse, #d5b67944 0%, #8ccd6520 45%, transparent 72%);
}

.profile-doll-stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, #0d121888 0%, transparent 14%, transparent 86%, #0d121888 100%),
    linear-gradient(#06101755, transparent 24%, transparent 68%, #0d1218dd);
}

.profile-doll-hero {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 16px #000a);
  animation: profile-hero-idle 4.8s ease-in-out infinite;
  transform-origin: center bottom;
}

.profile-doll-badge {
  position: absolute;
  z-index: 3;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16px);
  padding: 4px 8px 4px 5px;
  color: #f3deb5;
  background: rgba(9, 16, 22, .86);
  border: 1px solid #79684b;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .04em;
}

.profile-doll-badge img {
  width: 16px;
  height: 16px;
}

@keyframes profile-bg-ken {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

@keyframes profile-glow-breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.08); }
}

@keyframes profile-mist-drift {
  from { transform: translate3d(-3%, 0, 0); opacity: .75; }
  to { transform: translate3d(4%, -2%, 0); opacity: 1; }
}

@keyframes profile-ember-drift {
  from { opacity: .2; transform: translate3d(0, 0, 0); }
  to { opacity: .9; transform: translate3d(10px, -26px, 0); }
}

@keyframes profile-hero-idle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .profile-doll-bg,
  .profile-doll-glow,
  .profile-doll-mist,
  .profile-doll-ember,
  .profile-doll-hero {
    animation: none !important;
  }
  .profile-doll-ember { display: none; }
  .profile-doll-bg { transform: none; }
}

.profile-quick-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 12px 14px;
}

.profile-quick-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 64px;
  padding: 8px 2px;
  color: #e0d5c2;
  text-decoration: none;
  font-size: 8px;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(135deg, #28312ade, #0b121adc);
  border: 1px solid #9b8454;
  border-radius: 8px;
  box-shadow: 0 3px 10px #0006, inset 0 1px #dec89733;
}

.profile-quick-row a:hover {
  color: #fff1c4;
  border-color: #d5b679;
}

.profile-quick-row a.is-active {
  color: #fff1c4;
  border-color: #d5b679;
  background: linear-gradient(135deg, #3a3428de, #1a1810dc);
}

.profile-tile-spheres {
  color: #9ec4ff;
}

.spheres-hint {
  margin: 0 12px 12px;
  padding: 10px 12px;
  color: #b8c0b8;
  font-size: 12px;
  line-height: 1.45;
  background: linear-gradient(160deg, #1b2730, #0d141b);
  border: 1px solid #63563e;
  border-radius: 8px;
}

.spheres-hint a {
  color: #e7d39a;
}

.spheres-screen .items_box {
  margin-bottom: 8px;
}

@media (max-width: 360px) {
  .profile-quick-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.profile-info-block {
  margin: 0 12px 10px;
  padding: 10px 12px;
  background: linear-gradient(160deg, #1b2730, #0d141b);
  border: 1px solid #63563e;
  border-radius: 8px;
}

.profile-info-block p {
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid #2a3036;
  color: #c8c2b4;
  font-size: 12px;
  line-height: 1.45;
}

.profile-info-block p:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-info-block p:first-child { padding-top: 0; }

.profile-section { margin: 0 12px 12px; }

.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 0 0;
  padding: 8px 12px;
  color: #fff5d7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to bottom, #2a221b 0, #1a1410 100%);
  border: 1px solid #8b6847;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  text-shadow: 0 1px 4px #000c;
}

.profile-section-body {
  padding: 8px 10px 10px;
  background: #121820;
  border: 1px solid #3d4246;
  border-top: 1px solid #766344;
  border-radius: 0 0 8px 8px;
}

.profile-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 2px;
  border-bottom: 1px solid #2a3036;
  color: #d5cbb8;
  font-size: 12px;
  line-height: 1.4;
}

.profile-stat:last-child { border-bottom: 0; }
.profile-stat img { width: 16px; height: 16px; flex-shrink: 0; }
.profile-stat a.grey { color: #b8b0a0; }
.profile-stat .lime,
.profile-sheet .lime { color: #9fd86a; }
.profile-stat .white,
.profile-sheet .white { color: #f4ead0; }

.profile-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 12px 14px;
}

.profile-tiles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  color: #e0d5c2;
  text-decoration: none;
  text-align: center;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: linear-gradient(160deg, #1b2730, #0d141b);
  border: 1px solid #766344;
  border-radius: 10px;
}

.profile-tiles a:hover {
  border-color: #d5b679;
  color: #fff1c4;
}

.profile-tile-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ebd2a2;
  background: linear-gradient(140deg, #28323be8, #0d141cea);
  border: 1px solid #9b8454;
  border-radius: 50%;
  box-shadow: inset 0 1px #dec89733;
}

.profile-tile-icon .tida-icon { width: 20px; height: 20px; }

.profile-vip {
  margin: 0 12px 14px;
  padding: 12px;
  background: linear-gradient(160deg, #241d16, #15110d);
  border: 1px solid #766344;
  border-radius: 10px;
}

.profile-vip ul {
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  color: #d5b679;
  font-size: 11px;
  line-height: 1.55;
}

.profile-vip li { margin: 0 0 4px; }

.profile-vip-btn,
a.profile-vip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  color: #102010 !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(180deg, #8fd86a, #3e9a3a);
  border: 1px solid #b8f090;
  border-radius: 8px;
  box-shadow: 0 0 18px #4caf5044, inset 0 1px 0 #c8ffb0;
}

.profile-vip-btn:hover,
a.profile-vip-btn:hover { filter: brightness(1.06); }

.profile-pets-row,
.profile-effects-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.profile-pets-row a {
  display: block;
  padding: 3px;
  background: #171d20;
  border: 1px solid #766344;
  border-radius: 6px;
}

.profile-pets-row a img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
}

.profile-effects-row img {
  width: 32px;
  height: 32px;
  border: 1px solid #5a4a34;
  border-radius: 4px;
}

.profile-meta {
  margin: 0;
  padding: 10px 12px;
  color: #a7b3b7;
  font-size: 11px;
  background: #121820;
  border: 1px solid #3d4246;
  border-radius: 0 0 8px 8px;
}

.profile-section .profile-meta {
  border-top: 1px solid #766344;
}

.profile-meta p {
  margin: 0;
  padding: 4px 0;
  border-bottom: 1px solid #2a3036;
}

.profile-meta p:last-child { border-bottom: 0; }

.profile-ban {
  margin: 0 12px 10px;
  padding: 8px 10px;
  color: #f0a090;
  background: rgba(40, 14, 12, .85);
  border: 1px solid #6a3a34;
  border-radius: 8px;
  font-size: 12px;
}

@media (min-width: 400px) {
  .profile-doll {
    grid-template-columns: 60px minmax(0, 1fr) 60px;
    gap: 10px;
  }
  .profile-slot { width: 60px; height: 60px; }
  .profile-slot img { width: 44px; height: 44px; }
  .profile-doll-hero { height: 300px; }
  .profile-doll-stage { min-height: 320px; }
}

@media (max-width: 340px) {
  .profile-doll {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 5px;
    padding: 8px 5px;
  }
  .profile-slot { width: 48px; height: 48px; border-radius: 7px; }
  .profile-slot img { width: 34px; height: 34px; }
  .profile-slot span { font-size: 6px; }
  .profile-doll-hero { height: 220px; }
  .profile-doll-stage { min-height: 240px; padding-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-slot:hover,
  .profile-tiles a:hover,
  .profile-quick-row a:hover {
    box-shadow: inset 0 1px #d7c49b18, 0 2px 8px #0006;
  }
}