/* Variables */

:root {
  /* Base */
  --bg: #0A0A18;
  --bg-rgb: 10, 10, 24;     

  /* Surfaces */
  --card: #121226;
 
  /* Accents */
  --accent-cyan: #3FF2FF;
  --accent-purple: #8A3BFF;
  --accent-gradient: linear-gradient( 135deg, var(--accent-cyan) 0%, var(--accent-cyan) 35%, var(--accent-purple) 70%, #FF66FF 100% );


  /* text */

  --text: #F5F7FA;
  --gold: #FFD66B;

  --font: 1rem;
  --padding: 0.5rem 0.75rem;
  --padding-vertical: 0.5rem;
  --border-radius: 1.1rem;


  /* Lighting */
  --glow-strong: rgba(55, 226, 255, 0.22);   /* cyan glow */
  --glow-soft: rgba(163, 71, 255, 0.18);     /* purple glow */
  --stroke-thin: rgba(255, 255, 255, 0.08);  /* micro-strokes */

  --border-color: #F5F7FA; 

  /* Blurs */
  --blur-card: 12px;
  
  /* Energy Bar */
  --offsetWidth: 20px;
  --barHeight: 20px;
  --offsetY: 10px;
  --offsetGap: 15px;

  /* Button Style */
  --btn-width: 56px;
  --btn-height: 56px;
  --btn-radius: 12px;
  --btn-border-width: 2px;
  --btn-bg: var(--card);
  --btn-hover-scale: 1.05;
  --btn-hover-translate: -2px;
  --btn-active-scale: 0.9;
  --btn-transition: transform 120ms ease, filter 140ms ease, border-color 160ms ease;
  --btn-glow-cyan: rgba(55,226,255,0.32);
  --btn-glow-purple: rgba(163,71,255,0.28);

  --tap-btn-size: clamp(8rem, 50vmin, 22rem);

  /* HUB Style */
  --hub-btn-height: 56px;
  --hub-btn-padding: 0px 15px;
  --hub-border-width: 1px;
  --hub-border-radius: 20px;
  --hub-padding-top: 10px;
  --hub-margin-top: 40px;
  --hub-font-size: 16px;

  /* Lottie */
  --particle-opacity: 0.7;
 
 /* Toast*/
  --toast-padding: 4px 12px;
  --toast-radius: 10px;
  --banner-height: 0px;
  --item-size: 140px;

}


/*------------*/
/*Main content*/
/*------------*/

html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; font-family:'Poppins', sans-serif; background-color:var(--bg); color:var(--text); }
.bg { position:fixed; inset:0; background-color:var(--bg); z-index: -1; }

.upper-glass { position: absolute; display: flex; flex-direction: column; align-items: center; top: calc(var(--offsetWidth)/2); left: calc(var(--offsetWidth)/2); right: calc(var(--offsetWidth)/2); width: auto; gap: 0.3rem; padding: 0.5rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

.stats-block { display: flex; height: 3rem; align-items: center; justify-content: space-between; z-index: 100; width: 100%; gap: 10px }
.energy-pack { position: relative; width: 100%; height: var(--barHeight); display: flex; align-items: center; gap: var(--offsetGap); z-index: 100; }

.boost-icon, .ph-sketch-logo, .ph-rocket, .ph-user-plus, .ph-fire { font-size: 1.5rem; display: inline-block; margin-right: 0.2em; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 0 10px rgba(180,200,255,0.4); }

#xpCounter, #gemsCount, #ReferralBoost {
  position: relative;
  display: flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--gold);
  padding: 0 0.5rem;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: var(--font);
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid var(--stroke-thin);

  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-pph { position: fixed; top: 15%; left: 50%; pointer-events: none; font: var(--font); font-weight: bold; font-size: 1rem; color: var(--text); opacity: 0; }
.floating-pph.animate { animation: popUp 2s forwards; }
.floating-pph .pph-value { color: var(--gold); }
@keyframes popUp { 0% { transform: translateX(-50%) scale(0); opacity: 0; } 5% { transform: translateX(-50%) scale(2); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 0; } }

#lottie-bg { position: fixed; inset: 0; pointer-events: none; opacity: var(--particle-opacity); z-index: 1; }
#lottie-bg canvas { width: 100%; height: 100%; }

#particles-tap { position: fixed; inset: 0; pointer-events: none; opacity: 0.5; z-index: 1; }

#mainContent { position:relative; width:100%; height:100%; transition:filter 0.3s ease; font-family:'Poppins', sans-serif; }

.level-indicator { position: fixed; top: calc(var(--barHeight) + 8*var(--offsetY)); left: var(--offsetWidth); background: var(--card); color: var(--gold); padding: var(--padding); border-radius: var(--border-radius); font-weight: 700; font-size: var(--font); z-index: 101; font-family: 'Poppins', sans-serif; box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft); backdrop-filter: blur(var(--blur-card)); border: 1px solid var(--stroke-thin); text-align: center; display: inline-flex; align-items: center; justify-content: center; }

.energy-bar-container { position: relative; flex: 1; height: 100% ; background: rgba(18, 18, 38, 0.6); border-radius: 8px; overflow: hidden; z-index: 100; font-family: 'Poppins', sans-serif; box-shadow: 0 0 8px var(--glow-strong), 0 0 16px var(--glow-soft); backdrop-filter: blur(18px); }
.energy-bar { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); box-shadow: 0 0 6px var(--glow-strong), 0 0 12px var(--glow-soft) inset; transform-origin: left center; transform: scaleX(0); transition: transform 0.3s ease-out; border-radius: 8px; overflow: hidden; }
.energy-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 120deg, rgba(255,255,255,0.25), rgba(255,255,255,0.75), rgba(255,255,255,0.25) ); filter: blur(3px); animation: shinePulse 2s ease-in-out infinite; }
@keyframes shinePulse { 0%   { opacity: 0.5; } 50%  { opacity: 0.9; } 100% { opacity: 0.5; } }

.gem-animation { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 64px; z-index: 3000; animation: goldenFlash 1s ease-out forwards; pointer-events: none; font-family: 'Poppins', sans-serif; color: var(--gold); text-shadow: 0 0 8px var(--glow-strong), 0 0 16px var(--glow-soft); }

/*-----------*/
/*Leaderboard*/
/*-----------*/

#HubHeader, #LeaderboardHeader, #OtherHubHeader, #shopHeader {position: absolute; top: 0; left: 0;  width: 100%; height: calc(var(--btn-height) + var(--offsetY) ); border-bottom: 1px solid #ccc; display: flex; align-items: center; padding-left: 20px; box-sizing: border-box; z-index: 2100; }

#SearchBtn{ position: relative; left: calc(var(--offsetWidth)/2); flex-shrink: 0; padding: 0 ; background: none; border: none; cursor: pointer; z-index: 2001; display: flex;}
#SearchBtn .ph-magnifying-glass { font-size: 2rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }

#leaderboardOverlay, #personalHub, #otherPlayerHub  { display: flex; position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--btn-height) + 2*var(--offsetY) + var(--banner-height, 0px)); background: rgba(var(--bg-rgb), 0.75); color: var(--text-color, #fff); z-index: 2000; flex-direction: column; align-items: center; padding: 80px calc(var(--offsetWidth)/2) 0px calc(var(--offsetWidth)/2); overflow-x: hidden; overflow-y: auto; touch-action: pan-y; font-family: 'Poppins', sans-serif; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; transform: translateY(100%); opacity: 0; pointer-events: none; z-index: 2000; }

#leaderboardOverlay.active { transform: translateY(0); opacity: 1; pointer-events: auto; }

#leaderboardContainer, #resultsContainer  { width: 100%; max-width: 600px; display: flex; flex-direction: column; row-gap: 10px; align-items: stretch; overflow-y: visible; margin-top: 10px;}
 
#resultsContainer { display: none; }
#resultsContainer.active { display: flex; }
#leaderboardContainer.inactive { display: none; }

.leaderboard-rank { width: 25px; text-align: center; }
.leaderboard-pic { width: 100%; height: 100%; border-radius: 50%; margin: 0; display: block; }

.leaderboard-badge { position: absolute; top: -5px; right: -5px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.leaderboard-badge img { width: 100%; height: 100%; border-radius: inherit; }

.leaderboard-row {font-size: 15px ; display: flex; align-items: center; gap: 10px; padding: 0 4px; flex-shrink: 0; height: 70px; border: 2px solid transparent; border-radius: 20px; overflow: visible; }

.rank-gold   { border-color: #FFD700; }
.rank-silver { border-color: #C0C0C0; }
.rank-bronze { border-color: #CD7F32; }

/* LEFT SIDE */
.leaderboard-left { display: flex; align-items: center; gap: 0px; flex: 1; min-width: 0; margin-left: 0.5em; }
.leaderboard-name-block { display: inline-flex; flex-direction: column; white-space: nowrap; }
.leaderboard-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow: hidden; display: block }
.leaderboard-tag { color: var(--accent-cyan); white-space: nowrap; overflow: hidden; display: block}

/* RIGHT SIDE */
.leaderboard-right { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.leaderboard-xp { width: 60px; text-align: right; margin-right: 10px; }

/*------------------------*/
/*--- Player's Profile ---*/
/*------------------------*/

.hub-background { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-height: 100%; object-fit: cover; z-index: 10; pointer-events: none; }

#SettingsBtn{ position: relative; left: calc(var(--offsetWidth)/2); flex-shrink: 0; padding: 0 ; background: none; border: none; cursor: pointer; z-index: 2001; display: flex;}
#SettingsBtn .ph-gear-six { font-size: 2rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }


.hub-top-row { width:90%; height: 70px; flex-shrink: 0; display:flex; justify-content:space-between; align-items:center; margin-top: 20px ; margin-bottom: var(--offsetY); font-family:'Poppins', sans-serif; overflow-y: visible; }

.profile-pic-wrapper, .profile-pic-wrapper-other { position: relative; display: inline-block;  width: 64px; height: 64px; }
.leaderboard-pic-wrapper {position: relative; display: inline-block; }

#HubHeader .HubTitle, #OtherHubHeader .HubTitle, #LeaderBoard, #Shop { position: absolute; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: 600; color: var(--gold); text-align: center; pointer-events: none; }

.hub-level-text { font-size: 20px; font-weight:bold; color: var(--gold); font-family:'Poppins', sans-serif; }
.hub-profile-pic, .hub-profile-pic-other { width: 100%; height: 100%;  display: block; width:64px; height:64px; border-radius:50%; object-fit:cover; cursor:pointer; font-family:'Poppins', sans-serif; }

.hub-level-name { font-size: var(--font) ; color: var(--gold); font-family:'Poppins', sans-serif; }
.hub-xp-bar-container {width:100%; height:20px; background:rgba(255,255,255,0.2); border-radius:10px; margin-bottom: var(--offsetY) ; font-family:'Poppins', sans-serif; }
.hub-xp-bar { min-height: 20px;  background:linear-gradient(90deg,var(--gold),#ff8c00); border-radius:10px; transition:width 0.3s ease-out; font-family:'Poppins', sans-serif; }
.hub-xp-counter { font-size: var(--font) ; margin-bottom: 0px ; color: var(--gold); font-family:'Poppins', sans-serif; }

/* Referrrals Section */
.hubReferralRow, .hubStatsGroup { margin-top: var(--offsetY); flex-direction: column; width: 100%; display: flex; align-items: center; gap: 5px; border-top: var(--hub-border-width) solid var(--border-color); border-top-left-radius: var(--hub-border-radius); border-top-right-radius: var(--hub-border-radius); padding-top: var(--hub-padding-top);}
.hubRowLabel { width: 100%; text-align: center; font-size: var(--font) ; font-weight: 700; color: var(--text); }

.hubSemiGroup {position: relative; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; margin-top: var(--offsetY) ; width: 100%; }

/*Group 1*/
.hubReferralStatsGroup { display: flex; align-items: center; justify-content: center; gap: 1rem;}
.hub-referral-boost, .hubReferralStats ,.hub-PPH-group, .hubStreakGroup { display: flex; flex-direction: column; align-items: center; gap:5px }
.hubReferralsBox, .hub-PPH, .hub-Streak { padding: var(--padding) ; height: auto ; border-radius: var(--border-radius) ; background: var(--card); color: var(--gold); display: flex; justify-content: center; align-items: center; font-size: var(--font); font-weight: 700; margin: 0 auto; font-family: 'Poppins', sans-serif; box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft); backdrop-filter: blur(var(--blur-card)); border: 1px solid var(--stroke-thin); width: auto; }
.hubReferralsLabel { margin-top: 5px; font-size: var(--font) ; color: var(--gold); font-family: 'Poppins', sans-serif; }

/*Group 2*/
.hubReferralCodeGroup{ display: flex; flex-direction: column; align-items: center; gap:5px }
.hubReferralCodeRow { display: flex; align-items: center; justify-content: center; gap: 5px; }
.referral-code { margin-top: 0; text-align: center; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; }

.copy-confirm { position: absolute; bottom: -7px; width: 90%; text-align: center; transform: translateX(100%); display: block; font-size: var(--font); color: var(--text); background: var(--card); padding: var(--toast-padding); border-radius: 1rem; border: 1px solid var(--stroke-thin); font-family: 'Poppins', sans-serif; opacity: 0; z-index: 4001; box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft); backdrop-filter: blur(var(--blur-card)); transition: transform 0.5s ease, opacity 0.5s ease; pointer-events: none;}


.copy-confirm.show { opacity: 1; transform: translateX(0) }
.copy-confirm.hide { opacity: 0; transform: translateX(100%) }

/*----------*/
/*Gems Block*/
/*----------*/

.gems-block { margin-top: 5px; margin-bottom: 10px; width: 100%; display: flex; gap: 10px ; flex-direction: column; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; border-top: var(--hub-border-width) solid var(--border-color); border-top-left-radius: var(--hub-border-radius); border-top-right-radius: var(--hub-border-radius); padding-top: var(--hub-padding-top); }
.hubRowLabel { display: flex; align-items: center; gap: 6px; justify-content: center; }
.hubIcon { width: 14px; height: 14px; fill: currentColor; }
.SatCountBox { padding: var(--hub-btn-padding); height: 70px; border-radius: 20px; background: var(--card); color: var(--gold); display: flex; justify-content: center; align-items: center; font-weight: 700; margin: 0 auto; font-family: 'Poppins', sans-serif; box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft); backdrop-filter: blur(var(--blur-card)); border: 1px solid var(--stroke-thin); max-width: 100%; }
.sats-unit { font-size: 0.5em; opacity: 0.8; margin-left: 4px; }
.hubGemsRow { display: flex; align-items: center; justify-content: center; gap: 30px; }

/*Withdraw*/

.HubWithdrawBtn { width: 100%; }
.HubWithdrawBtn button {
  width: 100%;
  padding: var(--hub-btn-padding);
  height: var(--hub-btn-height);
   background: linear-gradient(
    135deg,
    rgba(51,255,255,0.65) 0%,
    rgba(154,51,255,0.65) 50%,
    rgba(255,102,255,0.65) 100%
  );
  color: var(--text);
  font-weight: bold;
  font-size: 2rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 20px var(--btn-glow-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.HubWithdrawBtn button.inactive { background: linear-gradient( 135deg, rgba(160,160,160,0.6) 0%, rgba(120,120,120,0.6) 50%, rgba(90,90,90,0.6) 100% ); color: rgba(200,200,200,0.7); box-shadow: none; cursor: not-allowed; filter: grayscale(1) brightness(0.8); pointer-events: none; }

.Hub-Withdrawal-Info { width: 94%; display: flex; flex-direction: row; align-items: center; gap: 30px ; padding: var(--padding) ; border-top: 1px solid #555; border-bottom: 1px solid #555 }

.withdrawal-text { font-family: 'Poppins', sans-serif; font-size:var(--font); color: var(--text); }

.hub-section-title { font-weight:bold; font-size:26px; margin-bottom:8px; color:#fff; text-align:center; font-family:'Poppins', sans-serif; }
#personalHub.active, #otherPlayerHub.active { transform: translateY(0); opacity: 1; pointer-events: auto;}

#OtherHubContent, #personalHubContent { width: 100%;  display: flex; flex-direction: column; row-gap: 5px; align-items: center; overflow-y: auto; overflow-x: hidden; }

/*-----------*/
/*----Shop---*/
/*-----------*/

#shopPanel {box-sizing: border-box; display: flex; position: fixed; right: 0; left: 0; top: 0; bottom: calc(var(--btn-height) + 2*var(--offsetY) + var(--banner-height, 0px)); background: rgba(var(--bg-rgb), 0.75); color: var(--text-color, #fff); z-index: 2000; flex-direction: column; align-items: center; padding: 80px calc(var(--offsetWidth)/2) 0px calc(var(--offsetWidth)/2); overflow-x: hidden; overflow-y: hidden; touch-action: pan-y; font-family: 'Poppins', sans-serif; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; transform: translateY(100%); opacity: 0; pointer-events: none; }
#shopPanel.active { transform: translateY(0); opacity: 1; pointer-events: auto; width: 100%}
#shopContent {  box-sizing: border-box; align-items: center; width:100%; display:flex; flex-direction:column; row-gap: 10px; align-items: stretch; overflow-y: auto; }

.shop-item { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--border-radius); border: 1px solid rgba(200,200,200,0.3); background: rgba(var(--bg-rgb), 0.35); box-shadow: 0 2px 6px rgba(0,0,0,0.4); font-family: 'Poppins', sans-serif; }
.shop-item-name { width: 100%; text-align: center; font-size: clamp(0.9rem, 3vw, 1.1rem); font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-item-bottom { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.shop-item-icon-wrap { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; width: fit-content; }
.shop-item-right { display: flex; flex-direction: column; gap: 0.5rem; flex: 0 0 auto; width: 8rem; align-items: center; }
.shop-item-icon { max-width: 100%; max-height: 100%; object-fit: contain; }
.ShopPriceBox { font-size: clamp(0.85rem, 3vw, 1rem); width: 5rem; font-weight: 600; color: var(--gold); white-space: nowrap; text-align: right; flex: 0 0 auto; }
.shop-buy-btn { padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.8rem, 3vw, 1.2rem); font-size: clamp(1.2rem, 3vw, 1.5rem); background: linear-gradient( 135deg, rgba(51,255,255,0.65) 0%, rgba(154,51,255,0.65) 50%, rgba(255,102,255,0.65) 100% ); color: var(--text); font-weight: 600; border: none; border-radius: 12px; width: 100%; white-space: nowrap; animation: btnBuy 0.8s ease-in-out infinite alternate; transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; }
.shop-buy-btn:active { animation: none; transform: scale(var(--btn-active-scale, 0.95)); box-shadow: 0 0 8px var(--btn-glow-cyan), 0 0 16px var(--btn-glow-purple); }
.ShopPriceBox {padding: var(--padding) ; gap: 0.5rem; height: auto ; border-radius: var(--border-radius) ; background: var(--card); color: var(--gold); display: flex; justify-content: center; align-items: center; font-size: var(--font) ; font-weight: 700; margin: 0 auto; font-family: 'Poppins', sans-serif; box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft); backdrop-filter: blur(var(--blur-card)); border: 1px solid var(--stroke-thin); width: auto; }

@media (max-width: 420px) { .shop-item-bottom { grid-template-columns: 1fr; }.shop-item-icon-wrap { aspect-ratio: auto; } }
@keyframes btnBuy { 0%   { transform: scale(0.98); } 100% { transform: scale(1.01); } }

/*Inventory*/

.hub-inventory {width: 100%; display:grid; grid-template-columns: repeat(auto-fit, minmax(var(--item-size), 1fr)); gap: 2rem; justify-items:center; margin-top: var(--offsetY) ; font-family:'Poppins', sans-serif}
.hub-inventory-wrapper { display: flex; flex-direction: column; align-items: center;  width: 100%; margin-top: 5px; gap: var(--offsetY) ; border-top: var(--hub-border-width) solid var(--border-color); border-top-left-radius: var(--hub-border-radius); border-top-right-radius: var(--hub-border-radius); padding-top: var(--hub-padding-top); }
.hub-inventory-item { width: var(--item-size); height: var(--item-size); background:rgba(255,255,255,0.2); border-radius: var(--border-radius) ; display:flex; justify-content:center; align-items:center; position:relative; cursor:default; transition:transform 0.2s; overflow:hidden; font-family:'Poppins', sans-serif; }
.hub-inventory-item-inner { width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-family:'Poppins', sans-serif; }
.hub-inventory-item-icon { width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:10px; font-family:'Poppins', sans-serif; }
.hub-inventory-item-count { position:absolute; top:2px; right:8px; font-size:14px; color:#fff; font-weight:bold; text-shadow:1px 1px 2px rgba(0,0,0,0.7); font-family:'Poppins', sans-serif; }
.hub-inventory-item-wrapper { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; transition:transform 0.1s ease; font-family:'Poppins', sans-serif; }
.hub-inventory-item-caption { font-size:13px; font-weight:400; color:#ffffff; text-shadow:0 0 8px rgba(255,255,255,0.9); text-align:center; pointer-events:none; max-width:120px; white-space:normal; word-wrap:break-word; font-family:'Poppins', sans-serif; }
.hub-inventory-item-wrapper:active { transform: scale(1.15); }

/*Messages*/

.toast-message { position: fixed; bottom: 30%; left:2%; width: 90%; text-align: center; transform: translateX(100%); display: block; font-size: var(--font); color: var(--text); background: var(--card); padding: var(--toast-padding); border-radius: var(--toast-radius); border: 1px solid var(--stroke-thin); font-family: 'Poppins', sans-serif; opacity: 0; z-index: 5001; box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft); backdrop-filter: blur(var(--blur-card)); transition: transform 0.5s ease, opacity 0.5s ease; pointer-events: none;}
.toast-message.show { opacity: 1; transform: translateX(0) }
.toast-message.hide { opacity: 0; transform: translateX(100%) }

/*TAP*/
.wrap { position: fixed; left: 50%; top: calc( (100svh - var(--banner-height, 0px)) / 2 - var(--tap-btn-size) / 2 ); transform: translateX(-50%); display: flex; justify-content: center; align-items: center; z-index: 101; font-family: 'Poppins', sans-serif; }
#tapOverlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(var(--tap-btn-size) * 1.5); height: calc(var(--tap-btn-size) * 1.5); border-radius: 50%; cursor: pointer; background: transparent; z-index: 0; }

#tapBtn {
  width: var(--tap-btn-size);
  height: var(--tap-btn-size);
  z-index: 1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
  user-select: none;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.5rem, 0.22 * var(--tap-btn-size), 4rem);
  font-weight: 800;
  background: linear-gradient( 135deg, #33FFFF 0%, #9A33FF 50%, #FF66FF 100% );
  position: relative;
  overflow: hidden;
  box-shadow:
    inset -14px -14px 48px rgba(0,0,0,0.65),   
    inset 14px 14px 36px rgba(255,255,255,0.25),
    inset 0 -8px 16px rgba(255,255,255,0.15),
    0 12px 40px rgba(0,0,0,0.7), 
    0 0 60px rgba(0,255,255,0.4),
    0 0 80px rgba(255,0,255,0.35);
}

#tapBtn::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(0,255,255,0.25), rgba(163,71,255,0.2), transparent 70% );
  opacity: 0;
  filter: blur(24px);
  transform: scale(0.6);
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#tapBtn::before {
  content: "";
  position: absolute;
  top: -12.5%;
  left: -12.5%;
  width: 125%;
  height: 125%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.25), transparent 70%), 
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 65%), 
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.25), transparent 60%);
}

#tapBtn span { color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 0 6px rgba(255,255,255,0.6), 0 0 14px rgba(180,200,255,0.45); }
#tapBtn:hover { transform: translateY(-2px) scale(1.02); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
#tapBtn:active { transform: scale(0.9); transition: transform 130ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 130ms ease; }
#tapBtn:active::after { opacity: 1; transform: scale(1); transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1); }
#tapBtn.is-active { transform: scale(0.9); transition: transform 130ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 130ms ease; }
#tapBtn.is-active::after { opacity: 1; transform: scale(1); }

/* Buttons */

#bottomButtons { position: fixed; left: calc(var(--offsetWidth)/2); right: calc(var(--offsetWidth)/2); bottom: var(--banner-height, 0px); height: var(--btn-height); margin-bottom: var(--offsetY); display: flex; justify-content: space-around; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 12px 30px rgba(0,0,0,0.25), inset 0 2px 4px rgba(255,255,255,0.08), inset 0 -2px 6px rgba(0,0,0,0.05); z-index: 5000; }
#bottomSlider { position: absolute; top: 0; left: 0; width: 25%; height: 100%; background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.12); transition: left 0.35s cubic-bezier(0.4,0,0.2,1); pointer-events: none; z-index: 1; }
#bottomButtonsInner { position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; display: flex; justify-content: space-around; align-items: center; }

#HomeBtn, #hubBtn, #leaderboardBtn, #shopBtn { width: var(--btn-width); height: var(--btn-height); border: none; background: transparent; cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; transition: transform 0.2s ease, opacity 0.2s ease; }
#HomeBtn .ph-house, #hubBtn .ph-user-circle, #leaderboardBtn .ph-crown, #shopBtn .ph-shopping-cart  { font-size: 2.5rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }

#restoreEnergyBtn { position: relative; height: 100%; flex-shrink: 0; padding: 0; background: none; border: none; cursor: pointer; z-index: 101; display: flex; align-items: center; justify-content: center; animation: btnPulse 0.8s ease-in-out infinite alternate; }
@keyframes btnPulse { 0%   { transform: scale(0.92); } 100% { transform: scale(1.08); } }
#restoreEnergyBtn .ph-battery-charging { font-size: 2.5rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }

#SoundBtn{ position: absolute; top: 7rem; left: calc(var(--offsetWidth)/2); flex-shrink: 0; padding: 0 ; background: none; border: none; cursor: pointer; z-index: 101; display: flex;}
#SoundBtn .ph-speaker-simple-high { font-size: 2rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }

#SoundBtn.muted::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2.2rem; height: 2px; background: red; transform: translate(-50%, -50%) rotate(45deg); }

#copyReferralBtn { position: relative; height: 100%; flex-shrink: 0; padding: 0; background: none; border: none; cursor: pointer; z-index: 101; display: flex; align-items: center; justify-content: center;}
#copyReferralBtn .ph-copy { font-size: 2.5rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }
#copyReferralBtn:active { transform: scale(0.9); filter: brightness(0.9); transition: transform 0.1s, filter 0.1s; }

.glow { box-shadow: 0 0 20px gold, 0 0 40px orange; border-radius: 50%; }

/*Frames*/

.hub-inventory-item-gold-frame{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hub-inventory-item-neon-frame{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}

.hub-inventory-item-pulse-frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hub-inventory-item-pulse-frame::after { content: ''; position: absolute; width: 85px; height: 85px; border-radius: 50%; top: 50%; left: 50%; pointer-events: none; background: conic-gradient( #ff002b, #ff4d00, #ff7300, #ffa600, #ffcc00, #ff3385, #ff0066, #ff4d00, #ff9900, #ff002b ); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px)); animation: fieryPulseRotate 3s cubic-bezier(0.8, 0, 0.2, 1) infinite; z-index: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }

/*Floating XP*/

.floating-xp-wrap { align-items: center; width: 100px; height: 50px; white-space: nowrap; opacity: 0; position: fixed; display: block; z-index: 1000; pointer-events: none; }
.floating-xp { font-weight: 700; font-size: 1.5rem; color: var(--gold); }
.floating-sat { font-weight: 400; font-size: 1rem; color: var(--text); }

@keyframes xpPop { 0% { transform:scale(0.7); opacity: 0; } 10% { transform: scale(1.9); opacity: 1; } 20% { transform: translateY(-5px) scale(1); opacity: 1; } 100% { transform: translateY(-200px) scale(1); opacity: 0; } }

.xp-animate { animation: xpPop 1.3s forwards; }
.xp-arc { animation-timing-function: ease-out; animation-fill-mode: forwards; }

.floating-xp-yellow { color: yellow; }
.floating-xp-purple { color: purple; }
.floating-xp-pink { color: pink; }
.floating-xp-gradient-purple-pink { background: linear-gradient(to right, purple, pink); -webkit-background-clip: text; background-clip: text; color: transparent; }

/*Loading*/

#loadingOverlay { position: fixed; inset: 0; backdrop-filter: blur(8px); background: rgba(10,10,20,.4); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 99999; }
body.loading #loadingOverlay { opacity: 1; pointer-events: all; }

/*Search*/

#leaderboardSearchOverlay { z-index: 9999; position: absolute; inset: 0; background: rgba(var(--bg-rgb), 0.95); display: flex; align-items: center; padding: 0 16px; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease; }
#leaderboardSearchOverlay.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
#leaderboardSearchInput { font-family: 'Poppins', sans-serif; box-sizing: border-box; flex: 8; height: 44px; border-radius: 14px; border: none; font-size: 15px; background: #222; color: var(--text); }
#leaderboardSearchInput::placeholder { opacity: 0.5; }

#SearchCloseBtn{ position: relative; flex: 2; flex-shrink: 0; justify-content: center; padding: 0 ; background: none; border: none; cursor: pointer; z-index: 2001; display: flex;}
#SearchCloseBtn .ph-x { font-size: 2rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }
html, body { touch-action: manipulation; }

#wcard { position: fixed; display: none; flex-direction: column ; bottom: 30%; left:2%; width: 90%; text-align: center; gap: 10px; font-size: var(--font); color: var(--text); background: var(--card); padding: var(--toast-padding); border-radius: var(--toast-radius); border: 1px solid var(--stroke-thin); font-family: 'Poppins', sans-serif;  z-index: 10001; box-shadow: 0 0 12px var(--glow-strong), 0 0 24px var(--glow-soft); backdrop-filter: blur(var(--blur-card)); transition: transform 0.5s ease, opacity 0.5s ease;}
#wcard input { box-sizing: border-box; display: block; width: 100%; height: 48px; padding: var(--hub-btn-padding); border-radius: 10px; border: 1px solid var(--stroke-thin); font-size: 1rem; }

#SubmitBtn {
  width: 100%;
  padding: var(--hub-btn-padding);
  height: var(--hub-btn-height);
  background: linear-gradient(
    135deg,
    rgba(51,255,255,0.65) 0%,
    rgba(154,51,255,0.65) 50%,
    rgba(255,102,255,0.65) 100%
  );
  color: var(--text);
  font-weight: bold;
  font-size: 2rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 20px var(--btn-glow-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#wcardCloseBtn{ position: relative; flex: 2; flex-shrink: 0; justify-content: center; padding: 0 ; background: none; border: none; cursor: pointer; z-index: 2001; display: flex;}
#wcardCloseBtn .ph-x { font-size: 2rem; color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; }

#wmodalOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); display: none; z-index: 10000; }
#wmodalOverlay.active { display: block; }

/*Ad Banner*/

/*
#adBanner {
  position: fixed;      
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 60px;      
  background: #222;     
  z-index: 1000;
}*/

.input-hint, .input-info { width: 90%; font-size: 12px; color: #888;}

#loginUsername, #loginPassword, #regUsername, #regPassword, #regEmail { font-family: 'Poppins', sans-serif; width:90%; box-sizing: border-box; flex: 1; border-radius: 14px; border: none; font-size: 20px; padding: 8px 8px; background: #222; color: var(--text); }

#auth-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

.auth-card { position: absolute; display: flex; flex-direction: column; align-items: center;  left: calc(var(--offsetWidth)/2); right: calc(var(--offsetWidth)/2); width: auto; gap: 0.3rem; padding: 0.5rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.auth-card h2 { text-align: center; }

#openLogin,
#openRegister,
#guestBtn,
#loginSubmit,
#regSubmit,
#submitPassword {
  width: 90%;
  padding: var(--hub-btn-padding);
  height: var(--hub-btn-height);
  background: linear-gradient(
    135deg,
    rgba(51,255,255,0.65) 0%,
    rgba(154,51,255,0.65) 50%,
    rgba(255,102,255,0.65) 100%
  );
  color: var(--text);
  font-weight: bold;
  font-size: 1.2rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 20px var(--btn-glow-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#guestBtn {
  opacity: 0.7;
  box-shadow: none;
}

#LoginOverlay, #RegisterOverlay {
  width: 100%;
  position: relative;
  inset: 0;
  height: auto;
  display: none;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.shown { display: flex; }

#StartOverlay {
  width: 100%;
  position: relative;
  inset: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#settingsOverlay {
  position: fixed;
  top: 0;
  left: -100%;
  width: 60%;
  background: black;
  color: var(--text);
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 2001;
  bottom: calc(var(--btn-height) + 2*var(--offsetY) + var(--banner-height, 0px)); 
}

#settingsOverlay.active {
  left: 0;
}

.overlay-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.overlay-content .option {
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-align: left;
}

.settingsLabel { width: 100%; text-align: center; font-size: 20px ; font-weight: 700; color: var(--text); }


#privacy-container {
  position: relative;
  display: none;
  width: 90%;
  margin-left: 10px;
  margin-top: 20px;
  padding: 10px;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  z-index: 2002;
  overflow-y: auto;
  border-top: 1px solid var(--text);
}

#privacy-container.active {
  display: block;
}

#privacy-container h1 { text-align: center; font-size: 20px; color: var(--text); padding: 10px 0; }

.privacy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#passwordChange{
  width: 90%;
  position: relative;
  inset: 0;
  height: auto;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  display: none;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 2002;
}

#oldPassword, #newPassword { font-family: 'Poppins', sans-serif; width:90%; box-sizing: border-box; flex: 1; border-radius: 14px; border: none; font-size: 16px; padding: 8px 8px; background: #222; color: var(--text); z-index: 2002;}