/* Profiles on every page (assets/me/me.js): portrait in the top bar, achievement toasts, the level question on «В игре».
   Painted frames live in assets/me/frames/, achievement icons in assets/me/ach/. No glow, no neon: metal and a single gleam. */

/* portrait ring. Recruit is a plain metal ring; every other frame is painted (frames/<id>.webp, 256 px, hole 43% in the centre):
   the picture sits 30% beyond the ring box, the portrait fills 70% of the box, so ornaments (wings, crowns) reach outside. */
.me-ring { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  padding: 2px; background: #5d5a53; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.me-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2); }
.me-ring[class*="fr-"]:not(.fr-recruit) { padding: 0 !important; background: none; box-shadow: none; }
.me-ring[class*="fr-"]:not(.fr-recruit) img { width: 70%; height: 70%; }
.me-ring[class*="fr-"]:not(.fr-recruit)::after { content: ""; position: absolute; inset: -30%; pointer-events: none; background: var(--fr) center / contain no-repeat; }
.fr-bronze { --fr: url(frames/bronze.webp); } .fr-silver { --fr: url(frames/silver.webp); } .fr-gold { --fr: url(frames/gold.webp); }
.fr-relite { --fr: url(frames/relite.webp); } .fr-epic { --fr: url(frames/epic.webp); } .fr-legend { --fr: url(frames/legend.webp); }
.fr-boss { --fr: url(frames/boss.webp); } .fr-founder { --fr: url(frames/founder.webp); } .fr-dragon { --fr: url(frames/dragon.webp); }
.fr-fire { --fr: url(frames/fire.webp); } .fr-secrets { --fr: url(frames/secrets.webp); } .fr-recruiter { --fr: url(frames/recruiter.webp); }
/* Legend: a gleam runs over the metal only (masked by the frame itself) */
.me-ring.fr-legend::before { content: ""; position: absolute; inset: -30%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,240,200,.55) 50%, transparent 60%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: var(--fr) center / contain no-repeat; mask: var(--fr) center / contain no-repeat; animation: me-gleam 5s ease-in-out infinite; }
.me-ring.fr-legend::after { z-index: 0; }
@keyframes me-gleam { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .me-ring.fr-legend::before { animation: none; display: none; } }

/* top bar: portrait or the login button (roster and profile pages only) */
.mebtn { padding: 0; overflow: visible; }
.mebtn .me-ring { width: 34px; height: 34px; }
.mebtn.login { padding: 0 14px; width: auto; white-space: nowrap; font-weight: 600; font-size: .9rem; color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.mebtn.login:hover { background: var(--gold-2); }

/* achievement toast */
.me-toasts { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1200;
  width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.me-toast { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; overflow: hidden;
  padding: 12px 16px 12px 12px; border-radius: 10px; color: #f1ece0;
  background: linear-gradient(180deg, #17140e, #0d0c0a); border: 1px solid #8a6a28;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(240,213,140,.18), 0 18px 40px rgba(0,0,0,.55); }
.me-ti { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; padding: 3px;
  background: linear-gradient(145deg, #f0d58c, #7a5a1c 55%, #c9a54a); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.me-ti img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; background: #0d0c0a; }
.me-ti .me-ring { width: 40px; height: 40px; }
.me-ti:has(.me-ring) { background: none; box-shadow: none; }
.me-tt { display: grid; gap: 2px; min-width: 0; }
.me-tt small { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #e0c27a; }
.me-tt b { font-family: var(--font-display); font-weight: var(--display-w); font-size: 1.35rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-shield { display: grid; place-items: center; width: 40px; height: 44px; padding-bottom: 4px; font-weight: 700; font-size: .95rem; color: #1a1408;
  font-variant-numeric: lining-nums tabular-nums; background: linear-gradient(160deg, #f6e2a4, #c9a54a 55%, #8a6620);
  clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%); }
.me-toast.rank { border-color: #c9a54a; }
.me-toast.anim { animation: me-in .45s var(--ease) both; }
.me-toast.anim::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(240,213,140,.22) 50%, transparent 65%); transform: translateX(-100%);
  animation: me-gleam 1.1s .35s ease-out both; }
.me-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
@keyframes me-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes me-gleam { to { transform: translateX(100%); } }

/* «В игре»: offer to carry the level over to the main character */
.me-ask { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1150;
  width: min(520px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px;
  border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); color: var(--fg); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.me-ask span { flex: 1 1 220px; font-size: .95rem; }
.me-ask .btn { min-height: 40px; padding: 0 14px; border-radius: 7px; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; }
.me-ask .btn.gold { background: var(--gold); color: var(--gold-ink); border: 1px solid var(--gold); }
.me-ask .btn.ghost { background: none; color: var(--fg); border: 1px solid var(--line-2); }

@media (max-width: 719px) {   /* above the bottom tab bar, where the language hint sits too */
  .mebtn { display: none; }   /* the tab bar has «Профиль»; the top bar has no room next to search, radio and language */
  .me-toasts, .me-ask { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

:root[data-theme="light"] .me-ask { box-shadow: 0 12px 30px rgba(40,32,16,.12); }

@media (prefers-reduced-motion: reduce) {
  .me-toast.anim, .me-toast.anim::after { animation: none; }
  .me-toast.anim::after { display: none; }
  .me-toast.out { transition: none; }
}