@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap");

:root{
  --bg1:#0d0d12;
  --bg2:#1a1a24;
  --accent:#df005b;
  --glass:rgba(255,255,255,.04);
  --white:#f1f1f1;
  --text:#e0e0e0;
  --nav-inactive:#888;
  --nav-active:#dbdbdb;
  --input-bg:rgba(255,255,255,.08);
  --input-border:rgba(255,255,255,.12);
}

*{box-sizing:border-box;margin:0;padding:0;user-select:none;}

html{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}

body{
  font-family:'Poppins',sans-serif;
  min-height:100vh;
  background:url("/static/images/background.png");
  color:var(--text);
  padding:1.2rem 0 80px;
}

.wrapper{
  width:100%;
  max-width:420px;
  margin:0 auto;
  border-radius:18px;
  padding:1.5rem;
  position:relative;
}

/* hide top padding / logo when profile active */
body.profile-active{
  padding-top:0;
}
body.profile-active .wrapper{
  padding-top:0;
}
body.profile-active .top-logo{
  display:none !important;
}

/* ── заголовок ───────────────────────────── */
.title{margin-bottom:.6rem;text-align:center;}
.logo{
  font:800 46px/1 "Oswald",sans-serif;
  letter-spacing:.5px;
  color:#fff;
  position:relative;
}
.logo::after{
  content:"";
  display:block;
  width:260px;
  height:3px;
  background:var(--accent);
  margin:8px auto 0;
}

/* ── баланс ─────────────────────────────── */
.balance-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
}
.balance{
  font:800 40px/1 "Montserrat",sans-serif;
  color:#fff;
}
.m-icon{width:32px;height:32px;}

/* ── показатели ─────────────────────────── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:18px;
}
.stat{
  background:var(--glass);
  border:2px solid var(--glass);
  border-radius:14px;
  padding:10px 6px;
  text-align:center;
}
.stat span{
  font:700 18px/1 "Montserrat",sans-serif;
  color:#fff;
  display:block;
}
.stat small{
  font-size:10px;
  opacity:.8;
  text-transform:uppercase;
}

/* ── баннер заданий ─────────────────────── */
.tasks-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  border:none;
  border-radius:14px;
  padding:12px 16px;
  margin-bottom:26px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
.tasks-banner .arrow{font-size:20px;line-height:0;}

/* clicker */
#clicker{position:relative;}
.tap-btn{
  -webkit-tap-highlight-color:transparent;
  outline:none;
  width:260px;
  height:260px;
  margin:40px auto 30px;
  display:block;
  border:none;
  border-radius:50%;
  background:url("/static/images/tap-btn.svg") center/contain no-repeat;
  cursor:pointer;
  transition:transform .15s;
}
.tap-btn.clicked{animation:punch .10s;}
@keyframes punch{0%{transform:scale(.9);}100%{transform:scale(1);}}
.signature{margin-top:6px;text-align:center;}
.sig-main{font:600 14px/1 "Poppins",sans-serif;color:var(--accent);}
.sig-sub{font-size:8px;color:#df0059a9;opacity:.7;}

/* float text click animation */
.float-text{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,0);
  pointer-events:none;
  font-size:24px;
  color:var(--white);
  font-weight:600;
  z-index:1000;
  opacity:1;
}

/* ── generic tabs ───────────────────────── */
.tab{display:none;}
.tab.active{display:block;}

.item{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.06);
  padding:.9rem 1rem;
  border-radius:14px;
  margin-bottom:1rem;
}
.item button{
  width:100%;
  margin-top:.6rem;
  padding:.55rem;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
.item button:disabled{background:#555;cursor:default;}
#shop img{width:100%;border-radius:10px;margin-bottom:.6rem;}

/* bottom nav */
.bottom-nav{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  display:flex;
  justify-content:space-around;
  padding:14px 0;
  background:rgba(26,26,36,.95);
  backdrop-filter:blur(4px);
  box-shadow:0 -6px 28px rgba(0,0,0,.6);
  z-index:2000;
}
.bottom-nav button{
  flex:1;
  background:none;
  border:none;
  color:var(--nav-inactive);
  font-size:11px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.bottom-nav button.active,
.bottom-nav button:hover{color:var(--nav-active);}
.bottom-nav button.active::after{
  content:"";
  display:block;
  width:24px;
  height:2px;
  margin-top:2px;
  background:var(--accent);
  border-radius:1px;
}

.icon{
  width:24px;height:24px;display:block;
  background:currentColor;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.icon.tap      {-webkit-mask-image:url("/static/icons/tap.svg");      mask-image:url("/static/icons/tap.svg");}
.icon.tasks    {-webkit-mask-image:url("/static/icons/tasks.svg");    mask-image:url("/static/icons/tasks.svg");}
.icon.upgrades {-webkit-mask-image:url("/static/icons/upgrades.svg"); mask-image:url("/static/icons/upgrades.svg");}
.icon.shop     {-webkit-mask-image:url("/static/icons/shop.svg");     mask-image:url("/static/icons/shop.svg");}
.icon.profile  {-webkit-mask-image:url("/static/icons/user.svg");     mask-image:url("/static/icons/user.svg");}

/* ── PROFILE MAIN ───────────────────────────────── */
.profile-header {
  position: relative;
  margin:0 auto 4.6rem;
}

.profile-header .profile-banner {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: var(--profile-banner-h, 160px);
  background: #2f3136;
  background-size: cover;
  background-position: center;
}
.profile-banner{
  width:100%;
  height:200px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.profile-header-content{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:0 16px;
  margin-top:-135px;
  z-index:2;
}
.profile-avatar{
  width:96px;
  height:96px;
  border-radius:50%;
  border:4px solid #1e1f22;
  background:#000;
  object-fit:cover;
}
.profile-header-text{flex:1;min-width:0;}
.profile-nick{
  font-size:1.25rem;
  font-weight:700;
  line-height:1.2;
  word-break:break-word;
  color:#fff;
}
.profile-userid{
  font-size:.8rem;
  color:#b5bac1;
  margin-top:2px;
}
.profile-userid .copy-btn{
  margin-left:6px;
  font-size:.75rem;
  line-height:1;
  padding:4px 10px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
.profile-registered{
  font-size:.75rem;
  color:#b5bac1;
  margin-top:4px;
}

/* inline community icon/emoji near nick */
.profile-comm-icon{
  width:20px;
  height:20px;
  margin-left:4px;
  vertical-align:middle;
  object-fit:contain;
}
.profile-comm-emoji{
  margin-left:4px;
  font-size:1.1em;
  vertical-align:middle;
}

/* community block */
.profile-community{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:1rem;
}
.profile-community-avatar{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  background:var(--glass);
}
.profile-community-text div:first-child{font-weight:600;}

/* community banner overlay */
.profile-community.item {
  position:relative;
  overflow:hidden;
}
.profile-community.item.has-banner {
  background-size:cover;
  background-position:center;
}
.profile-community.item.has-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.profile-community.item.has-banner > * {
  position:relative;
  z-index:1;
}

/* new sublist (buttons to subpages) */
.profile-sublist{display:flex;flex-direction:column;gap:10px;margin:1.4rem 0;}
.profile-sublist-row{
  width:100%;
  padding:1rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:1rem;
  border:none;
  border-radius:14px;
  background:var(--glass);
  color:#fff;
  cursor:pointer;
  text-align:left;
}
.profile-sublist-row .sublist-emoji{font-size:1.2rem;}
.profile-sublist-row .sublist-arrow{opacity:.6;}

/* ── PROFILE SUBPAGES (full-screen) ───────────────────── */
.profile-page{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:calc(100vh - 64px);
  padding:env(safe-area-inset-top,0) 16px 96px;
  background:rgba(13,13,18,.98);
  overflow-y:auto;
  z-index:1500;
  transform:translateY(0);
  transition:opacity .15s;
}
.profile-page.hidden{
  display:none;
  opacity:0;
  pointer-events:none;
}
.profile-page-topbar{
  position:sticky;
  top:0;
  background:rgba(13,13,18,.98);
  padding:12px 0 8px;
  z-index:10;
  display:flex;
  align-items:center;
  gap:12px;
}
.profile-page-topbar h3{
  font-size:1.1rem;
  font-weight:600;
  color:#fff;
}
.profile-page-topbar .back-btn{
  border:none;
  background:none;
  color:var(--accent);
  font-size:1rem;
  cursor:pointer;
}
.profile-page-content{margin-top:8px;}

/* stats list lines */
.stats-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.stats-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-radius:14px;
  background:var(--glass);
  font-size:.95rem;
}
.stats-line strong{font-weight:600;}

/* achievements */
.ach-list{display:flex;flex-direction:column;gap:10px;}
.ach-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  background:var(--glass);
}
.ach-item.done{outline:2px solid var(--accent);}
.ach-item .ach-emoji{font-size:1.4rem;}
.ach-item .ach-text{flex:1;}
.ach-item .ach-title{font-weight:600;color:#fff;}
.ach-item .ach-desc{font-size:.8rem;opacity:.75;}

/* invite page */
.invite-actions{
  margin-bottom:1.2rem;
}
.invite-actions .invite-input-wrap{
  position:relative;
  margin-top:.5rem;
  display:flex;
  gap:8px;
}
.invite-actions input.invite-input{
  flex:1;
  padding:.65rem .75rem;
  font-size:.9rem;
  border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:#fff;
}
.invite-actions button.copy-btn,
.invite-actions button.share-btn{
  padding:.65rem .9rem;
  font-size:.85rem;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  white-space:nowrap;
  cursor:pointer;
}

.invite-summary{
  font-size:.9rem;
  margin-top:.6rem;
  opacity:.85;
}

.invite-list{
  margin-top:1.2rem;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.invite-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  background:var(--glass);
}
.invite-avatar{
  width:36px;height:36px;
  border-radius:50%;
  object-fit:cover;
  background:var(--glass);
  flex-shrink:0;
}
.invite-info{flex:1;line-height:1.15;}
.invite-nick{font-weight:600;color:#fff;font-size:14px;}
.invite-check{color:var(--accent);margin-left:4px;}
.invite-sub{font-size:11px;opacity:.7;white-space:nowrap;}

/* cosmetics */
.cosm-group{
  margin-bottom:2rem;
}
.cosm-group h4{
  margin-bottom:.6rem;
  font-size:1rem;
  font-weight:600;
  color:#fff;
}
.cosm-card{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.06);
  padding:.8rem 1rem;
  border-radius:14px;
  margin-bottom:1rem;
}
.cosm-card .cosm-preview{
  width:100%;
  height:40px;
  margin-bottom:.5rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
}
.cosm-card .cosm-name{font-weight:600;margin-bottom:.25rem;}
.cosm-card .cosm-price{
  font-size:.85rem;
  opacity:.8;
  display:flex;
  align-items:center;
  gap:4px;
}
.cosm-card button{
  width:100%;
  margin-top:.4rem;
  padding:.55rem;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.cosm-card button:disabled{background:#555;cursor:default;}

/* mini toast */
.mini-toast{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-24px;
  padding:4px 10px;
  font-size:12px;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  opacity:0;
  animation:miniToast 1.5s forwards;
  pointer-events:none;
  white-space:nowrap;
}
@keyframes miniToast{
  0%{opacity:0;transform:translate(-50%,10px);}
  10%{opacity:1;transform:translate(-50%,0);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-6px);}
}

.profile-header.theme-black .profile-userid,
.profile-header.theme-black .profile-registered {
  color: #ffffff;
}

.profile-header.theme-white .profile-userid,
.profile-header.theme-white .profile-registered {
  color: #000000;
}

.invite-link-row{
  display:flex;
  gap:8px;
  margin-top:6px;
}
.invite-link-row input{
  flex:1;
  padding:6px 8px;
  font-size:14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.25);
  color:#fff;
}
.invite-link-row button{
  padding:6px 10px;
  font-size:14px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.invite-reward{
  margin-top:8px;
  font-size:13px;
  opacity:.9;
}

/* locked cosmetics */
.cosm-card.cosm-locked{
  opacity:.6;
  position:relative;
}
.cosm-card.cosm-locked .cosm-lock-msg{
  margin-top:4px;
  font-size:12px;
  color:#ff7b7b;
  opacity:.9;
}
.cosm-card.cosm-locked button{
  background:#555;
  cursor:not-allowed;
}
.cosm-preview.locked{
  filter:grayscale(100%) brightness(.5);
}
.pshop-group-title{
  margin:1.5rem 0 .5rem;
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  opacity:.85;
}

body.comm-admin-mode #comm-admin {display:block;}
.hidden-admin{display:none;}

#comm-admin{
  padding:1.4rem 0 96px;
  color:#fff;
}