/* ===========================
   Helbreath Hub — Account Pod
=========================== */

.account-pod{
  /* scoped vars */
  --wrapW: 1072px;
  --podW: 148px;
  --podGap: 26px;
  --podTop: 195px;

  --bg: rgba(12,12,12,.74);
  --bd: rgba(255,255,255,.10);
  --soft: rgba(255,255,255,.06);

  --accent: #f4a261;
  --good: #66ff66;
  --bad: #ff6b6b;
  --gold: #ffc400;
  --text: #eaeaea;
  --dim: #cfcfcf;

  position: fixed;
  top: var(--podTop);
  width: var(--podW);
  z-index: 999;

  /* keep it from going off screen */
  left: clamp(12px, calc(50% - (var(--wrapW) / 2) - var(--podW) - var(--podGap)), 9999px);

  padding: 10px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--bd);
  box-shadow: 0 14px 44px rgba(0,0,0,.58);
  backdrop-filter: blur(9px);

  /* fixes the "little bar" issue most of the time */
  max-height: calc(100vh - var(--podTop) - 40px);
  overflow: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;

  /* iOS notch / safe area friendliness */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.account-pod{
  transform: translateY(30px);
}

.account-pod::-webkit-scrollbar{ width: 8px; }
.account-pod::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.account-pod .avatar-wrapper{
  position: relative;
  width: 124px;
  height: 124px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account-pod .avatar-wrapper img.avatar{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
  border: 2px solid rgba(0,0,0,.65);
  background: rgba(0,0,0,.25);
  box-shadow: 0 12px 26px rgba(0,0,0,.55);
}

/* ring should work regardless of "special" class */
.account-pod .avatar-wrapper img.ring{
  position: absolute;
  top: 0; left: 0;
  width: 124px;
  height: 124px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 9px 18px rgba(0,0,0,.55));
}

.account-pod .pod-name{
  margin-top: 6px;
  text-align: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .15px;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
  word-break: break-word;
}
.account-pod .pod-name.is-admin{
  color: #ff4d4d !important;
  font-weight: 900;
}

.account-pod .pod-badges{
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.account-pod .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--soft);
  color: var(--dim);
  text-decoration: none;
  font-weight: 800;
  user-select: none;
}
.account-pod .pill.lvl{
  border-color: rgba(255,196,0,.22);
  background: rgba(255,196,0,.10);
  color: #ffe39b;
}
.account-pod .pill.notif{
  border-color: rgba(244,162,97,.22);
  background: rgba(244,162,97,.10);
  color: #ffd8b8;
}

.account-pod .pill .mini-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight: 900;
  font-size: 9px;
}
.account-pod .pill .mini-count.hot{
  border-color: rgba(230,104,90,.45);
  background: rgba(230,104,90,.16);
  color: #ffd0d0;
}

.account-pod .pod-actions{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.account-pod .pod-btn{
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 9px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: #ececec;
  text-decoration: none;
  font-family: Monospace, Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.account-pod .pod-btn svg{
  width: 15px;
  height: 15px;
  opacity: .95;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45));
  flex: 0 0 15px;
}

.account-pod .pod-btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.45);
  border-color: rgba(244,162,97,.45);
  color: var(--accent);
}
.account-pod .pod-btn.profile:hover{
  border-color: rgba(102,255,102,.45);
  color: var(--good);
}

.account-pod .pod-btn .right{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #cfcfcf;
  font-weight: 900;
}
.account-pod .pod-btn .right.hot{
  border-color: rgba(230,104,90,.45);
  background: rgba(230,104,90,.16);
  color: #ffd0d0;
}

.account-pod .auth-button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 9px;
  margin-top: 9px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: #ececec;
  font-family: Monospace, Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .25px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.account-pod .auth-button:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.45);
  border-color: rgba(244,162,97,.55);
  color: var(--accent);
}
.account-pod .auth-button.login:hover{ border-color: rgba(102,255,102,.55); color: var(--good); }
.account-pod .auth-button.logout:hover{ border-color: rgba(255,107,107,.55); color: var(--bad); }

/* Responsive behavior */
@media (max-width: 1320px){
  .account-pod{
    position: static;
    width: 100%;
    margin: 12px 0;
    left: auto;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}