/* TAVORYN — Player Profile */
:root {
  --profile-bg: #050711;
  --profile-panel: rgba(10, 14, 28, 0.9);
  --profile-line: rgba(255, 255, 255, 0.115);
  --profile-text: #f5f7ff;
  --profile-muted: #98a5c3;
  --profile-gold: #efca6b;
  --profile-blue: #72d4ff;
  --profile-violet: #9e63ff;
  --profile-green: #66efaa;
  --profile-red: #ff748b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.profile-page {
  min-height: 100vh;
  margin: 0;
  color: var(--profile-text);
  background:
    radial-gradient(circle at 12% 8%, rgba(64, 188, 255, 0.18), transparent 29%),
    radial-gradient(circle at 88% 10%, rgba(158, 99, 255, 0.2), transparent 32%),
    radial-gradient(circle at 52% 70%, rgba(239, 202, 107, 0.065), transparent 38%),
    var(--profile-bg);
}
.profile-page a, .profile-page button, .profile-page input { font: inherit; }

.profile-header {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 72px;
  padding: 11px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--profile-line);
  background: rgba(3, 6, 14, 0.91);
  backdrop-filter: blur(18px);
}
.profile-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  letter-spacing: 0.18em;
}
.profile-brand span { color: var(--profile-blue); }
.profile-header nav { display: flex; justify-content: center; gap: 7px; }
.profile-header nav a {
  padding: 9px 13px;
  color: var(--profile-muted);
  text-decoration: none;
  border-radius: 999px;
}
.profile-header nav a:hover, .profile-header nav a.active {
  color: white;
  background: rgba(255, 255, 255, 0.07);
}
.header-wallet { display: flex; gap: 8px; }
.header-wallet span {
  padding: 8px 12px;
  border: 1px solid var(--profile-line);
  border-radius: 13px;
  color: var(--profile-muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.72rem;
}
.header-wallet b { margin-inline-start: 6px; color: var(--profile-gold); }

.profile-shell { width: min(1480px, calc(100% - 28px)); margin: 0 auto; padding: 30px 0 60px; }
.profile-hero {
  padding: 1px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(114, 212, 255, 0.42), rgba(158, 99, 255, 0.2), rgba(239, 202, 107, 0.36));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.36);
}
.identity-card {
  min-height: 300px;
  padding: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  border-radius: 31px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.055), transparent 44%),
    radial-gradient(circle at 16% 50%, rgba(114, 212, 255, 0.14), transparent 28%),
    rgba(6, 10, 21, 0.96);
}
.level-orbit { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.level-orbit::before, .level-orbit::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(114, 212, 255, 0.26);
  border-radius: 50%;
  animation: orbitSpin 13s linear infinite;
}
.level-orbit::after { inset: -8px; border-style: dashed; border-color: rgba(239, 202, 107, 0.23); animation-direction: reverse; animation-duration: 20s; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.avatar-ring {
  position: relative;
  z-index: 2;
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  border: 2px solid var(--profile-gold);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #274b7d, #171032 48%, #080b17);
  box-shadow: 0 0 45px rgba(114, 212, 255, 0.22), inset 0 0 28px rgba(158, 99, 255, 0.18);
}
.avatar-ring span { font-size: 3.2rem; font-weight: 1000; color: var(--profile-gold); }
.level-badge {
  position: absolute;
  right: 8px;
  bottom: 12px;
  z-index: 4;
  min-width: 70px;
  padding: 7px 10px;
  text-align: center;
  border: 1px solid rgba(239, 202, 107, 0.65);
  border-radius: 999px;
  color: #171006;
  background: linear-gradient(135deg, #fff0ad, #dca93a);
  font-size: 0.72rem;
  font-weight: 1000;
}
.level-badge strong { font-size: 1.05rem; }
.eyebrow { margin: 0 0 8px; color: var(--profile-blue); font-size: 0.72rem; font-weight: 1000; letter-spacing: 0.16em; }
.name-editor { display: flex; gap: 8px; align-items: center; }
.name-editor input {
  width: min(480px, 100%);
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  outline: none;
  color: white;
  background: transparent;
  font-size: clamp(1.7rem, 4vw, 3.5rem);
  font-weight: 1000;
}
.name-editor input:focus { border-color: var(--profile-blue); }
.name-editor button {
  padding: 8px 13px;
  border: 1px solid var(--profile-line);
  border-radius: 12px;
  color: white;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.identity-copy h1 { margin: 10px 0 8px; color: var(--profile-gold); font-size: 1.15rem; }
.identity-copy > p:not(.eyebrow) { margin: 0; color: var(--profile-muted); }
.xp-block { margin-top: 24px; max-width: 720px; }
.xp-labels { margin-bottom: 8px; display: flex; justify-content: space-between; color: var(--profile-muted); font-size: 0.75rem; }
.xp-track { height: 12px; padding: 2px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(0, 0, 0, 0.26); }
.xp-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3abaff, #9e63ff, #efca6b); box-shadow: 0 0 20px rgba(114, 212, 255, 0.4); transition: width 0.35s ease; }
.hero-actions { min-width: 190px; display: grid; gap: 9px; }
.primary-profile-btn, .secondary-profile-btn {
  min-height: 48px;
  padding: 10px 18px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 1000;
}
.primary-profile-btn { color: #171006; background: linear-gradient(135deg, #fff0ad, #dca93a); }
.secondary-profile-btn { color: white; border: 1px solid var(--profile-line); background: rgba(255, 255, 255, 0.045); }

.stats-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stat-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--profile-line);
  border-radius: 20px;
  background: var(--profile-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.stat-card span, .stat-card small { display: block; color: var(--profile-muted); }
.stat-card span { font-size: 0.75rem; }
.stat-card strong { display: block; margin: 8px 0; color: white; font-size: clamp(1.45rem, 3vw, 2.35rem); }
.stat-card small { font-size: 0.65rem; line-height: 1.5; }
.stat-card.wins strong { color: var(--profile-green); }
.stat-card.losses strong { color: var(--profile-red); }
.stat-card.collection strong, .stat-card.chests strong { color: var(--profile-blue); }
.stat-card.pity strong { color: #d8adff; }
.stat-card.deck strong { color: var(--profile-gold); }

.profile-layout { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.lower-layout { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); }
.panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--profile-line);
  border-radius: 25px;
  background: var(--profile-panel);
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.25);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-head h2 { margin: 0; }
.panel-head.compact { margin-bottom: 18px; }
.claim-all-btn {
  padding: 9px 14px;
  border: 1px solid rgba(102, 239, 170, 0.35);
  border-radius: 13px;
  color: var(--profile-green);
  background: rgba(102, 239, 170, 0.06);
  cursor: pointer;
}
.claim-all-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rewards-track { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reward-node {
  position: relative;
  min-height: 184px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--profile-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.032);
}
.reward-node::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  top: -48px;
  left: -34px;
  border-radius: 50%;
  background: rgba(158, 99, 255, 0.14);
  filter: blur(3px);
}
.reward-node.unlocked { border-color: rgba(102, 239, 170, 0.35); }
.reward-node.claimed { opacity: 0.66; }
.reward-level { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--profile-blue); background: rgba(114, 212, 255, 0.08); font-size: 0.65rem; font-weight: 1000; }
.reward-node h3 { margin: 14px 0 7px; font-size: 1rem; }
.reward-node p { min-height: 38px; margin: 0 0 14px; color: var(--profile-muted); font-size: 0.72rem; line-height: 1.65; }
.reward-node button {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  color: #130f08;
  background: linear-gradient(135deg, #fff0ad, #dca93a);
  cursor: pointer;
  font-weight: 1000;
}
.reward-node button:disabled { color: var(--profile-muted); border: 1px solid var(--profile-line); background: rgba(255, 255, 255, 0.035); cursor: not-allowed; }

.resource-list { display: grid; gap: 9px; }
.resource-list div { padding: 13px; display: flex; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.resource-list span { color: var(--profile-muted); font-size: 0.75rem; }
.resource-list strong { color: white; }
.next-reward { margin-top: 16px; padding: 17px; border: 1px solid rgba(239, 202, 107, 0.28); border-radius: 17px; background: rgba(239, 202, 107, 0.05); }
.next-reward span, .next-reward strong, .next-reward small { display: block; }
.next-reward span, .next-reward small { color: var(--profile-muted); }
.next-reward strong { margin: 8px 0; color: var(--profile-gold); }

.history-list { display: grid; gap: 9px; }
.history-empty { padding: 28px; text-align: center; color: var(--profile-muted); border: 1px dashed var(--profile-line); border-radius: 16px; }
.history-entry {
  padding: 13px 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.026);
}
.result-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-weight: 1000; }
.history-entry.win .result-icon { color: #04160d; background: var(--profile-green); }
.history-entry.loss .result-icon { color: #24050b; background: var(--profile-red); }
.history-copy strong, .history-copy small { display: block; }
.history-copy small { margin-top: 4px; color: var(--profile-muted); }
.history-gains { text-align: left; }
.history-gains b, .history-gains span { display: block; }
.history-gains b { color: var(--profile-blue); }
.history-gains span { color: var(--profile-gold); font-size: 0.72rem; }

.owned-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.owned-card { min-width: 0; overflow: hidden; border: 1px solid var(--profile-line); border-radius: 14px; background: #080c17; }
.owned-card img { width: 100%; aspect-ratio: 3 / 4; display: block; object-fit: cover; }
.owned-card div { padding: 8px; }
.owned-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.62rem; }
.owned-card small { color: var(--profile-muted); font-size: 0.52rem; }

.reward-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 380px;
  padding: 16px 18px;
  border: 1px solid rgba(102, 239, 170, 0.38);
  border-radius: 17px;
  background: rgba(5, 13, 20, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52), 0 0 30px rgba(102, 239, 170, 0.1);
}
.reward-toast strong, .reward-toast span { display: block; }
.reward-toast strong { color: var(--profile-green); }
.reward-toast span { margin-top: 5px; color: var(--profile-muted); line-height: 1.6; }
.reward-toast[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .profile-header { grid-template-columns: 1fr; }
  .profile-header nav, .header-wallet { justify-content: center; }
  .identity-card { grid-template-columns: auto 1fr; }
  .hero-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-layout, .lower-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .profile-shell { width: min(100% - 16px, 1480px); }
  .profile-header { padding: 10px; }
  .profile-header nav, .header-wallet { flex-wrap: wrap; }
  .identity-card { padding: 24px 17px; grid-template-columns: 1fr; text-align: center; }
  .level-orbit { margin: 0 auto; }
  .name-editor { flex-direction: column; }
  .name-editor input { text-align: center; }
  .hero-actions, .stats-grid, .rewards-track, .owned-preview { grid-template-columns: 1fr; }
  .xp-labels { gap: 14px; }
}

/* TAVORYN Story Mode */
.stat-card.story strong { color: #78dcff; }
/* TAVORYN_STORY_MODE_CHAPTER1_V1 */
.avatar-ring span.has-avatar-image{width:100%;height:100%;display:block}.avatar-ring span.has-avatar-image img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}