/* Player avatar in the header and the profile screen (app.js avatarHtml, renderProfile). */

/* Avatar: a round picture inside a ring. The ring is the frame: .avatar--<style> per frame style
   (seasonal.py frame_style); "base" when the player has none. A custom avatar only swaps the img. */
.avatar { --ring:conic-gradient(from 200deg,#c8f7ff,#4fb3e6,#1667b1,#8ce8ff,#c8f7ff); --glow:#8ce8ff55; position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; padding:3px; border-radius:50%; background:var(--ring); box-shadow:0 0 0 2px #0b4a94,0 3px 0 #0a3979,0 6px 12px #001e4f66,0 0 12px var(--glow); }
.avatar__img { width:100%; height:100%; border-radius:50%; object-fit:cover; background:radial-gradient(circle at 50% 30%,#4ca6e3,#0d4b92 72%); box-shadow:inset 0 0 0 2px #06306a; }
.avatar--founder { --ring:conic-gradient(from 180deg,#fff1b8,#ffc53d,#b8451a,#5a2a10,#ff8a3c,#ffe58a,#fff1b8); --glow:#ff9a3c99; }
.avatar--pioneer { --ring:conic-gradient(from 200deg,#fff2c3,#efba61,#9a6328,#ffe3a3,#efba61,#fff2c3); --glow:#efba6188; }
.avatar--season { --ring:conic-gradient(from 210deg,#b9fff4,#36c7c0,#13708a,#7ee6d9,#b9fff4); --glow:#7ee6d977; }
.avatar--early { --ring:conic-gradient(from 160deg,var(--c-dawn-1,#ffb36b),var(--c-dawn-2,#ff8a6b),var(--c-dawn-3,#ffd27a),#fff6dc,var(--c-dawn-1,#ffb36b)); --glow:#ff8a6b77; }
.avatar--gold { --ring:conic-gradient(from 180deg,#fff7d1,#ffd84d,#c99a12,#fff3a8,#ffd84d,#fff7d1); --glow:#ffd84daa; }
.avatar--elite { --ring:conic-gradient(from 200deg,#f6e7ff,#b57bff,#5b2bb8,#ffd36b,#b57bff,#f6e7ff); --glow:#b57bff88; }
.avatar--cup { --ring:conic-gradient(from 190deg,#fff6c9,#ffc53d,#c46a12,#ffe58a,#ffc53d,#fff6c9); --glow:#ffc53d88; }
.avatar--md { width:64px; height:64px; padding:4px; }
.avatar--xl { width:104px; height:104px; padding:6px; box-shadow:0 0 0 3px #0b4a94,0 5px 0 #0a3979,0 12px 22px #001e4f88,0 0 26px var(--glow); }
.avatar__lock { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; color:#bfe9ff; background:radial-gradient(circle at 50% 30%,#2b74b4,#0b3b7c 72%); }
.avatar__lock .icon { width:22px; height:22px; }

/* Header: the avatar takes the first column of #meters, left of the three resources (docs/23). */
#meters, body.game-mode #meters { grid-template-columns:auto minmax(0,1fr); align-items:center; }
.resource-token[data-menu-tab] { cursor:pointer; }
/* Four tiles (coins, DRAKLY, Crystals, energy): no captions, the icons tell them apart. */
#meters[data-n="4"] .resource-tile small { display:none; }
#meters[data-n="4"] .resource-tile { justify-content:center; }
.meter-avatar { display:grid; place-items:center; width:46px; min-height:47px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.meter-avatar .avatar { width:45px; height:45px; }
/* Avatar and three resources share the compact Telegram header. */
#meters .resource-tile { gap:4px; padding-inline:5px; }
#meters .resource-icon .ui-icon { width:25px; height:25px; }
#meters .resource-tile strong { font-size:14px; letter-spacing:-.03em; }
body:not(.game-mode) #meters { padding-left:9px; padding-right:58px; gap:4px; }
.meter-avatar:active .avatar { transform:translateY(2px) scale(.97); }
.meter-avatar.active .avatar { box-shadow:0 0 0 2px #f9ffff,0 3px 0 #0a3979,0 0 16px #bcf8ff; }
.meter-avatar:focus-visible { outline:3px solid #f9ffff; outline-offset:2px; border-radius:50%; }
@media (max-width:380px) { .meter-avatar { width:40px; } .meter-avatar .avatar { width:40px; height:40px; padding:2px; } #meters .resource-icon .ui-icon { width:21px; height:21px; } #meters .resource-tile { padding-inline:3px; } }

/* Profile screen. */
.profile-screen { display:grid; gap:16px; padding-bottom:12px; }
.profile-hero { position:relative; overflow:hidden; padding:20px 17px 16px; border:3px solid #a9ecff; border-radius:22px; background:radial-gradient(circle at 18% 22%,#7fd3f877,transparent 46%),linear-gradient(150deg,#2f8bd0,#135aa3 52%,#0a3979); box-shadow:inset 0 2px #e6fbff88,0 5px 0 #094d9c,0 12px 20px #092d6288; }
.profile-hero::after { content:""; position:absolute; right:-40px; top:-46px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,#bdf6ff33,transparent 68%); pointer-events:none; }
.profile-hero__top { position:relative; z-index:1; display:flex; align-items:center; gap:16px; }
.profile-hero__avatar { padding:0; border:0; background:none; border-radius:50%; cursor:pointer; }
.profile-hero__id { min-width:0; }
.profile-hero__id h1 { margin:2px 0 0; color:#fff; font:normal 27px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:-.03em; text-shadow:0 3px 0 #125390,0 5px 8px #0b3367aa; overflow-wrap:anywhere; }
.profile-hero__id p { margin:3px 0 0; color:#c9f2ff; font-size:13px; }
.profile-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.profile-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 6px; border:2px solid #8fdcff; border-radius:11px; color:#e6f8ff; font-size:12px; background:#0d4f97; box-shadow:0 2px 0 #08397a; }
.profile-chip .ui-icon { width:18px; height:18px; }
.profile-chip.is-on { color:#3b2a13; border-color:#fff2c3; background:linear-gradient(#ffe39a,#efba61); box-shadow:0 2px 0 #9a6328; }
.profile-stats { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
.profile-stats div { display:grid; justify-items:center; gap:1px; padding:9px 4px 8px; border:2px solid #7fd6fb; border-radius:14px; background:linear-gradient(#1c6cb4,#0b4688); box-shadow:inset 0 2px #c8f7ff55,0 3px 0 #07387a; }
.profile-stats strong { color:#fff; font:normal 20px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #0c4b92; font-variant-numeric:tabular-nums; }
.profile-stats strong em { color:#a9e6ff; font-size:13px; font-style:normal; }
.profile-stats small { color:#cdeeff; font-size:11px; text-align:center; }

.profile-bar { height:12px; margin:12px 0 14px; overflow:hidden; border:2px solid #7fd6fb; border-radius:9px; background:#082f66; box-shadow:inset 0 2px 3px #0008; }
.profile-bar span { display:block; height:100%; min-width:6px; border-radius:7px; background:linear-gradient(#b5f6ff,#3cb6ec 55%,#1781c8); box-shadow:inset 0 1px #fff9; transition:width .5s ease; }
.profile-bar.is-gold span { background:linear-gradient(#fff2c3,#efba61 55%,#c98a3a); }
.profile-ring { --p:0; display:grid; place-items:center; flex:none; width:60px; height:60px; border-radius:50%; background:conic-gradient(#8ce8ff calc(var(--p) * 1%),#0a3979 0); box-shadow:0 0 0 3px #0b4a94,0 4px 0 #07387a; }
.profile-ring b { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:#fff; font:normal 14px DraklyBlack,'Trebuchet MS',sans-serif; background:#0f4c92; }

.profile-rarity + .profile-rarity { margin-top:12px; }
.profile-rarity__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.profile-rarity__name { color:#cdeeff; font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 2px 0 #104981; }
.rarity-rare .profile-rarity__name { color:#e2ccff; }
.rarity-special .profile-rarity__name { color:#ffe39a; }
.profile-rarity__head b { color:#fff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; font-variant-numeric:tabular-nums; }
.profile-dex { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.dex-cell { position:relative; display:block; aspect-ratio:1; overflow:hidden; border:2px solid #1d5f9f; border-radius:12px; background:radial-gradient(circle at 50% 35%,#16508f,#08295a 75%); }
.dex-cell img { width:100%; height:100%; object-fit:cover; filter:brightness(0) saturate(0); opacity:.45; }
.dex-cell i { position:absolute; inset:0; display:grid; place-items:center; color:#8fd2f5; font:normal 18px DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px #062a5a; }
.dex-cell.is-owned { border-color:#a9ecff; background:radial-gradient(circle at 50% 35%,#5cb8ec,#145ea8 75%); box-shadow:0 2px 0 #08397a; }
.dex-cell.is-owned img { filter:none; opacity:1; }
.rarity-rare .dex-cell.is-owned { border-color:#d6b4ff; background:radial-gradient(circle at 50% 35%,#a07ae6,#4b2f99 75%); }
.rarity-special .dex-cell.is-owned { border-color:#ffe39a; background:radial-gradient(circle at 50% 35%,#ffc86b,#b8642a 75%); }
.profile-next { display:flex; align-items:center; gap:10px; margin:14px 0 12px; padding:8px 10px; border:2px dashed #8fdcff99; border-radius:14px; color:#e5f6ff; font-size:13px; line-height:1.35; }
.profile-next .egg-art { flex:none; width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 3px 3px #052a5a99); }

.profile-token { border-color:#ffe39a; background:radial-gradient(circle at 88% 8%,#ffd97a33,transparent 42%),linear-gradient(145deg,#2a7cc0,#104d90 50%,#0a3979); }
.profile-token__head { display:flex; align-items:center; gap:12px; }
.profile-token__head img { flex:none; width:58px; height:58px; border-radius:50%; box-shadow:0 0 0 3px #ffe39a,0 4px 0 #9a6328,0 0 18px #efba6177; }
.profile-token__head h2 { margin:2px 0 0; }
.profile-token__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:14px; }
.profile-token__stats div { display:grid; gap:1px; min-width:0; padding:8px 8px 7px; border:2px solid #7fd6fb; border-radius:13px; background:#0c4789; box-shadow:inset 0 2px #c8f7ff44; }
.profile-token__stats small { color:#bfe9ff; font-size:11px; }
.profile-token__stats strong { overflow:hidden; color:#fff; font:normal 17px/1.15 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.profile-token__stats em { color:#a9e6ff; font-size:11px; font-style:normal; }
.profile-token__stats.is-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-token__stats .is-mult { border-color:#ffe39a; background:linear-gradient(#2d6fae,#123f7c); }
.profile-token__stats .is-mult strong { color:#ffe39a; text-shadow:0 2px #6b4513; }
.profile-ladder { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:-4px 0 0; padding:0; list-style:none; }
.profile-ladder li { display:grid; justify-items:center; padding:5px 2px; border:2px solid #2b6fae; border-radius:10px; color:#9fcde8; background:#0a3a73; }
.profile-ladder b { font:normal 14px DraklyBlack,'Trebuchet MS',sans-serif; }
.profile-ladder small { font-size:10px; font-variant-numeric:tabular-nums; }
.profile-ladder li.reached { color:#3b2a13; border-color:#fff2c3; background:linear-gradient(#ffe39a,#efba61); }
.profile-ladder li.next { color:#fff; border-color:#ffe39a; box-shadow:0 0 0 2px #ffe39a55; }
.profile-perks,.profile-yield { margin:6px 0 0; color:#fff3d6; font-size:13px; line-height:1.4; }
.profile-lots { display:grid; gap:4px; margin:10px 0 0; padding:0; list-style:none; }
.profile-lots li { display:flex; flex-wrap:wrap; gap:2px 8px; justify-content:space-between; align-items:center; padding:5px 9px; border:2px solid #2b6fae; border-radius:10px; color:#d6f1ff; font-size:12px; background:#0a3a73; font-variant-numeric:tabular-nums; }
.profile-lots em { color:#bfe9ff; font-size:11px; font-style:normal; }
.profile-lots em.is-free { color:#ffe39a; }
.profile-lots li.more { justify-content:center; border-style:dashed; color:#9fcde8; }
.profile-goal { margin:12px 0 0; color:#fff3d6 !important; font-size:14px; line-height:1.4; }
.profile-locked { display:flex; gap:9px; align-items:flex-start; margin:12px 0 0; padding:9px 10px; border:2px solid #ffe39a; border-radius:13px; color:#fff3d6 !important; font-size:13px; background:#6b45133d; }
.profile-locked .ui-icon { flex:none; width:24px; height:24px; }
.profile-earn { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; margin-top:12px; color:#d6f2ff; font-size:13px; }
.profile-earn b { color:#fff; font-family:DraklyBlack,'Trebuchet MS',sans-serif; }
.profile-earn i { grid-column:1 / -1; height:6px; border-radius:4px; background:linear-gradient(90deg,#8ce8ff var(--p),#0a3979 var(--p)); }
.profile-actions { display:grid; gap:10px; margin-top:16px; }
.profile-actions .btn { min-height:50px; padding-inline:8px; font-size:15px; }

.profile-perks { display:grid; gap:7px; margin:12px 0 14px; padding:0; list-style:none; color:#e5f6ff; font-size:14px; }
.profile-perks li { display:flex; align-items:center; gap:8px; }
.profile-perks .icon { flex:none; width:18px; height:18px; color:#8ce8ff; }

.profile-frame-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 4px; }
.profile-frame-pick { display:grid; justify-items:center; gap:7px; margin:0; text-align:center; }
.profile-frame-pick:not(.is-owned) .avatar { filter:saturate(.35) brightness(.8); }
.profile-frame-pick figcaption { display:grid; gap:2px; }
.profile-frame-pick strong { color:#fff3d6; font-size:12px; line-height:1.2; }
.profile-frame-pick small { color:#a5e3f5; font-size:10.5px; line-height:1.25; }
.profile-frame-pick.is-shown small { color:#ffe39a; }
.profile-frames .btn { margin-top:12px; }

@media (max-width:380px) {
  .profile-hero__id h1 { font-size:23px; }
  .avatar--xl { width:88px; height:88px; padding:5px; }
  .profile-dex { gap:4px; }
  .profile-token__stats strong { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) { .profile-bar span { transition:none; } }
/* The profile’s "Stake" button lands on the stake card below the sticky header. */
.wallet-stake { scroll-margin-top:84px; }
@media (min-width:381px) { #meters .resource-tile small { font-size:10.5px; letter-spacing:-.02em; } #meters .resource-icon .ui-icon { width:23px; height:23px; } }

#meters .resource-energy { color:#ffd77d; cursor:pointer; }
#meters .resource-energy .resource-icon .icon { width:22px; height:22px; }
#meters .resource-energy .resource-copy strong { color:#fff9df; }
#meters .resource-energy .resource-copy small { color:#ffe6a6; font-variant-numeric:tabular-nums; white-space:nowrap; }
#meters .resource-energy:focus-visible { outline:3px solid #fff; outline-offset:2px; }
@media (max-width:380px) {
 #meters .resource-tile { gap:2px; padding-inline:2px; }
 #meters .resource-icon { flex-basis:17px; width:17px; }
 #meters .resource-icon .ui-icon, #meters .resource-energy .resource-icon .icon { width:17px; height:17px; }
 #meters .resource-tile strong { font-size:12px; }
 #meters .resource-tile small { font-size:9px; }
}

/* The resources share one slim bar instead of three separate plates: no per-tile frame and padding,
   so the balance and the caption fit next to the avatar, the pass medal and the menu. */
.meter-bar { display:grid; grid-template-columns:repeat(var(--meter-n,3),minmax(0,1fr)); align-items:center; min-width:0; min-height:44px; padding:0 1px; border:2px solid #82dfffb3; border-radius:15px; background:linear-gradient(180deg,#1f6fbae0,#0b3f86eb); box-shadow:inset 0 1px #c8f7ff66,0 3px 0 #0a3979,0 6px 10px #001e4f55; }
#meters .meter-bar .resource-tile { min-height:40px; gap:2px; padding:0 2px; border:0; border-radius:12px; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; justify-content:center; }
#meters .meter-bar .resource-tile + .resource-tile::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:#bdf3ff40; }
#meters .meter-bar .resource-tile[role="button"]:active { background:#ffffff1a; }
#meters .meter-bar .resource-tile strong { font-size:14px; letter-spacing:-.02em; }
#meters .meter-bar .resource-tile small { font-size:10px; letter-spacing:-.01em; -webkit-line-clamp:1; white-space:nowrap; text-overflow:clip; }
#meters .meter-bar .resource-icon { flex:0 0 20px; width:20px; }
#meters .meter-bar .resource-icon .ui-icon, #meters .meter-bar .resource-energy .resource-icon .icon { width:21px; height:21px; }
.meter-avatar { width:44px; min-height:44px; } .meter-avatar .avatar { width:44px; height:44px; }
@media (max-width:380px) {
 #meters .meter-bar .resource-tile { gap:1px; padding:0 1px; }
 #meters .meter-bar .resource-icon { flex-basis:18px; width:18px; }
 #meters .meter-bar .resource-icon .ui-icon, #meters .meter-bar .resource-energy .resource-icon .icon { width:18px; height:18px; }
 #meters .meter-bar .resource-tile strong { font-size:12.5px; }
 #meters .meter-bar .resource-tile small { font-size:9px; }
 .meter-avatar { width:40px; min-height:40px; } .meter-avatar .avatar { width:40px; height:40px; }
}