/* ============ نوار بالا ============ */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand svg { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 6px 10px rgba(124, 92, 255, 0.35)); }
.brand-name { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); border: 1px solid #fff; white-space: nowrap; }
.live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.live i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* ============ هیرو ============ */
.hero { text-align: center; padding: 34px 0 8px; }
.hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 92px);
  line-height: 1.1;
  background: linear-gradient(100deg, #5a3de0 10%, #b545e0 45%, #ff5fa2 70%, #ffac2f 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-in 0.9s var(--ease-jelly) both;
}
.hero .tagline { margin-top: 6px; font-size: clamp(16px, 2.4vw, 20px); color: var(--ink-2); font-weight: 600; }
.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.stats .chip { font-size: 13.5px; padding: 5px 14px; }
.stats b { color: var(--ink); font-weight: 900; }
@keyframes title-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } }

/* ============ سکو و لوله‌های مایع (امضای طراحی) ============ */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(10px, 3vw, 36px);
  max-width: 880px;
  margin: 30px auto 0;
  padding: 0 4px;
}
.pod { display: flex; flex-direction: column; align-items: center; min-width: 0; animation: rise 0.9s var(--ease-jelly) both; }
.podium.updating .pod { animation: none; }
.pod-2 { animation-delay: 0.15s; }
.pod-1 { animation-delay: 0.3s; }
.pod-3 { animation-delay: 0.45s; }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } }

.pod-head { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; border-radius: 20px; padding: 4px 8px; }
.pod-head:focus-visible { outline: 3px solid var(--violet); }
.pod-avatar { position: relative; }
.pod-avatar .avatar { width: clamp(76px, 15vw, 124px); height: clamp(76px, 15vw, 124px); border-width: 3px; animation: bob 3.6s ease-in-out infinite; }
.pod-2 .pod-avatar .avatar { animation-delay: -1.2s; }
.pod-3 .pod-avatar .avatar { animation-delay: -2.4s; }
.pod-1 .pod-avatar .avatar { width: clamp(92px, 19vw, 156px); height: clamp(92px, 19vw, 156px); }
@keyframes bob { 50% { transform: translateY(-7px); } }
.crown { position: absolute; top: -34%; left: 50%; width: 58%; transform: translateX(-50%) rotate(-8deg); animation: crown 3.6s ease-in-out infinite; }
@keyframes crown { 50% { transform: translateX(-50%) translateY(-9px) rotate(6deg); } }
.medal {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: clamp(28px, 4.5vw, 38px);
  height: clamp(28px, 4.5vw, 38px);
  display: grid;
  place-items: center;
  border-radius: 38%;
  font-family: var(--f-display);
  font-size: clamp(16px, 2.6vw, 22px);
  color: #fff;
  border: 2.5px solid #fff;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.4);
  line-height: 1;
  padding-top: 3px;
}
.pod-1 .medal { background: linear-gradient(135deg, #ffd35c, #ff9f1c); }
.pod-2 .medal { background: linear-gradient(135deg, #c9b8ff, #7c5cff); }
.pod-3 .medal { background: linear-gradient(135deg, #9df0ff, #1fb5d6); }
.pod-name { font-family: var(--f-display); font-size: clamp(18px, 3vw, 28px); line-height: 1.3; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tube {
  --h: 200px;
  --top: #c9b8ff;
  --bottom: #7c5cff;
  position: relative;
  width: min(100%, 170px);
  height: var(--h);
  margin-top: 12px;
  border-radius: 36px 36px 26px 26px;
  background: rgba(255, 255, 255, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow), inset 0 -10px 30px rgba(124, 92, 255, 0.08), inset 0 2px 0 #fff;
  overflow: hidden;
  isolation: isolate;
}
.pod-1 .tube { --h: clamp(190px, 34vw, 290px); --top: #ffe08a; --bottom: #ff9f1c; }
.pod-2 .tube { --h: clamp(150px, 27vw, 230px); }
.pod-3 .tube { --h: clamp(125px, 22vw, 190px); --top: #a8f0ff; --bottom: #1fb5d6; }
/* برق شیشه */
.tube::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 14px;
  right: 12%;
  width: 12%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15));
  opacity: 0.7;
  z-index: 3;
  pointer-events: none;
}
.liquid {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--level) * 100%);
  background: linear-gradient(180deg, var(--top), var(--bottom));
  /* پرشدن با transform (روی GPU) به‌جای height که هر فریم layout می‌گرفت */
  transform: translateY(calc(100% + 26px));
  transition: transform 1.8s var(--ease-out), height 0.9s var(--ease-out);
  z-index: 1;
}
.liquid.filled { transform: none; }
.wave { position: absolute; bottom: calc(100% - 1px); left: -100%; width: 200%; height: 18px; color: var(--top); animation: wave 3.2s linear infinite; }
.wave.w2 { opacity: 0.5; height: 22px; animation-duration: 5s; animation-direction: reverse; }
@keyframes wave { to { transform: translateX(50%); } }
.bubble { position: absolute; bottom: -10px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); animation: bubble 4s ease-in infinite; }
.bubble:nth-child(3) { left: 22%; animation-delay: -1s; }
.bubble:nth-child(4) { left: 58%; width: 5px; height: 5px; animation-delay: -2.6s; animation-duration: 3.2s; }
.bubble:nth-child(5) { left: 76%; width: 10px; height: 10px; animation-delay: -0.4s; animation-duration: 5s; }
@keyframes bubble { 80% { opacity: 0.8; } 100% { transform: translateY(-240px); opacity: 0; } }

.tube-xp {
  position: absolute;
  inset: auto 0 14px 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  line-height: 1;
}
.tube-xp .display { font-size: clamp(26px, 5vw, 46px); }
.pod-1 .tube-xp .display { font-size: clamp(32px, 6.4vw, 60px); }
.tube-xp .xp-tag { opacity: 0.9; font-size: 12px; margin-top: 4px; }

.pod-trophies { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 14px; min-height: 40px; }
.pod-trophies .badge { width: 36px; height: 36px; }
.more { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid #fff; font-weight: 800; font-size: 13px; color: var(--ink-2); }

/* ============ بخش‌ها ============ */
.section { margin-top: 64px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 4vw, 36px); }
.section-head p { color: var(--ink-2); font-size: 14.5px; }

/* تازه‌ها */
.recent { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 16px; margin: 0 -4px; scrollbar-width: thin; }
.recent-item {
  scroll-snap-align: start;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 290px;
  padding: 12px 14px;
  border-radius: 22px;
  cursor: pointer;
  text-align: right;
  animation: pop-in 0.5s var(--ease-jelly) both;
}
.recent-item .badge { width: 46px; height: 46px; }
.recent-item .who { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.recent-item .what { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.recent-item .when { font-size: 12px; color: var(--ink-3); }
.recent-item .avatar { width: 26px; height: 26px; border-width: 1.5px; }
.new-chip { font-size: 11px; font-weight: 900; color: #fff; background: var(--pink); padding: 1px 8px; border-radius: 999px; animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 0.65; } }

/* بقیه قهرمان‌ها */
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.hero-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: right;
  cursor: pointer;
  width: 100%;
  animation: pop-in 0.5s var(--ease-jelly) both;
  transition: transform 0.3s var(--ease-jelly), box-shadow 0.3s;
}
@media (hover: hover) { .hero-card:hover { transform: translateY(-3px); } }
.hero-card .rank { font-family: var(--f-display); font-size: 26px; color: var(--ink-3); min-width: 30px; text-align: center; line-height: 1; }
.hero-card .avatar { width: 54px; height: 54px; }
.hero-card .info { min-width: 0; flex: 1; }
.hero-card .name { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickers { display: flex; flex-wrap: wrap; gap: 8px 9px; margin-top: 6px; }
.stickers .badge { width: 32px; height: 32px; }
.stickers .badge .count { min-width: 19px; height: 19px; line-height: 16px; font-size: 10.5px; padding: 0 4px; bottom: -5px; left: -7px; }
.stickers .more { min-width: 32px; height: 32px; font-size: 12px; }

/* ویترین */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter { cursor: pointer; border: 1.5px solid #fff; transition: background 0.2s, color 0.2s, transform 0.25s var(--ease-jelly); }

.filter[aria-pressed='true'] { background: var(--ink); color: #fff; border-color: var(--ink); }
.showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.trophy-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px; align-items: start; animation: pop-in 0.45s var(--ease-jelly) both; }
.trophy-card .badge { width: 60px; height: 60px; grid-row: span 2; transition: transform 0.5s var(--ease-jelly); }
@media (hover: hover) { .trophy-card:hover .badge { transform: rotate(-10deg) scale(1.08); } }
.trophy-card h3 { font-size: 17px; font-weight: 800; }
.trophy-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.trophy-card .foot { grid-column: 1 / -1; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; }
.trophy-card .foot .first { color: var(--pink); }

/* مودال دانش‌آموز */
.student-sheet { text-align: center; }
.student-sheet .avatar { width: 96px; height: 96px; margin: 0 auto 6px; border-width: 3px; }
.student-sheet h2 { padding: 0; font-size: 32px; }
.student-sheet .meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 18px; }
.collection { display: grid; gap: 10px; text-align: right; }
.collection-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); border: 1px solid #fff; }
.collection-item .badge { width: 46px; height: 46px; }
.collection-item b { display: block; }
.collection-item small { color: var(--ink-2); font-size: 13px; line-height: 1.6; display: block; }
.collection-item .times { margin-inline-start: auto; font-family: var(--f-display); font-size: 22px; color: var(--violet); white-space: nowrap; }

/* پاپ زنده روی صفحه وقتی Trophy جدید می‌رسد */
.live-pop { position: fixed; z-index: 60; top: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 12px; border-radius: 999px; background: var(--glass-strong); border: 1.5px solid #fff; box-shadow: var(--shadow-lg); font-weight: 700; animation: drop-in 0.6s var(--ease-jelly) both; max-width: calc(100% - 32px); }
.live-pop .badge { width: 44px; height: 44px; animation: wiggle 0.9s ease 0.4s 2; }
.live-pop.out { animation: fade-out 0.4s ease both; }
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -40px) scale(0.8); } }
@keyframes wiggle { 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(10deg) scale(1.1); } }

footer.foot-note { text-align: center; color: var(--ink-3); font-size: 13px; padding: 60px 16px 36px; line-height: 1.9; }

/* روی گوشی و تبلت فقط انیمیشن‌های اصلی می‌مانند؛ انیمیشن‌های تزئینی دائمی حذف می‌شوند تا GPU سبک بماند */
@media (max-width: 640px), (pointer: coarse) {
  .bubble, .wave.w2 { display: none; }
  .pod-avatar .avatar, .crown, .new-chip { animation: none; }
}

@media (max-width: 640px) {
  .hero { padding-top: 22px; }
  .podium { gap: 8px; margin-top: 44px; }
  .tube { border-radius: 26px 26px 18px 18px; }
  .pod-trophies { gap: 6px; }
  .pod-trophies .badge, .pod-trophies .more { width: 28px; height: 28px; min-width: 28px; }
  .pod-trophies .badge .count { display: none; }
  .section { margin-top: 48px; }
  .others { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .recent-item { width: 250px; }
  .live { padding: 4px 10px; }
}

/* ورود کارت‌ها فقط با محوشدن (بدون جابه‌جایی) و فقط در بار اول؛ در به‌روزرسانی‌های زنده صفحه نمی‌پرد. */
.recent-item, .hero-card, .trophy-card { animation-name: fade-in; animation-duration: 0.4s; animation-timing-function: ease; }
body.ready .recent-item, body.ready .hero-card, body.ready .trophy-card { animation: none; }