:root{
  --bg:#000;
  --panel: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.06);
  --neon: #ff073a;
  --white:#ffffff;
  --muted: rgba(255,255,255,0.7);
  --phone-w:420px;
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Orbitron",sans-serif;
  background:linear-gradient(180deg,#000,#060607 65%);
  color:var(--white);
  display:flex; justify-content:center; -webkit-font-smoothing:antialiased;
}
.app{ width:100%; max-width:var(--phone-w); min-height:100vh; position:relative; }

/* header */
.hdr{ position:sticky; top:0; z-index:40; padding:10px 12px; background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-bottom:1px solid rgba(255,255,255,0.02); }
.hdr-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.wallet{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; background:var(--panel); border:1px solid var(--border); cursor:pointer; }
.wallet img{ width:22px; height:22px; object-fit:cover; border-radius:6px; }
.bal{ font-weight:800; color:var(--white); font-size:14px; }

/* auth */
.auth-row{ display:flex; gap:8px; }
.auth{ padding:8px 10px; border-radius:10px; font-weight:700; cursor:pointer; color:var(--white); border:1px solid transparent; background:transparent; font-family:"Orbitron",sans-serif; font-size: 14px; }
.auth.auth-outline{ border:1px solid var(--border); }
.auth.auth-solid{ background:var(--neon); color:#fff; }

/* brand with neon glow and flickering */
.brand{ color:var(--white); font-weight:900; font-size:1.45rem; letter-spacing:1px; }
.brand-chaos{ 
  color: var(--neon);
  text-shadow: 0 0 10px rgba(255,7,58,0.8), 0 0 20px rgba(255,7,58,0.6), 0 0 30px rgba(255,7,58,0.4);
}
.brand-arena{ 
  color: var(--neon);
  text-shadow: 0 0 10px rgba(255,7,58,0.8), 0 0 20px rgba(255,7,58,0.6), 0 0 30px rgba(255,7,58,0.4);
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 10px rgba(255,7,58,0.8), 0 0 20px rgba(255,7,58,0.6), 0 0 30px rgba(255,7,58,0.4);
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: 0 0 5px rgba(255,7,58,0.4);
    opacity: 0.6;
  }
  22% {
    text-shadow: none;
    opacity: 0.3;
  }
}

/* brand */
.hdr-brand{ display:flex; justify-content:center; padding:8px 0; }

/* meta row */
.hdr-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-top:6px; }
.timecol{ min-width:150px; display:flex; flex-direction:column; gap:6px; }
.time{ padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); text-align:center; font-weight:700; }
.date{ color:var(--muted); font-size:12px; text-align:center; }
.searchcol{ flex:1; display:flex; justify-content:flex-end; }
.search-wrap{ width:100%; max-width:360px; position:relative; }
.search-btn{ position:absolute; left:8px; top:8px; border:none; background:transparent; color:var(--white); font-size:16px; cursor:pointer; }
.search-input{ width:100%; padding:10px 12px 10px 40px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,0.02); color:var(--white); font-family:"Orbitron",sans-serif; }

/* pages */
.pages{ position:relative; overflow:hidden; }
.pages-track{ display:flex; transition:transform .34s cubic-bezier(.22,.9,.25,1); will-change:transform; }
.page{ min-width:100%; flex:0 0 100%; height:calc(100vh - 210px); overflow-y:auto; padding:14px; box-sizing:border-box; }
.page-inner{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; }

/* tighter center spacing – tiles close to center */
.center-tight{ justify-content:center; gap:10px; }

/* SHIFT UP: move the group slightly upward so tiles don't sit near hint bar */
.shifted-up{ transform: translateY(-6vh); }

/* tiles */
.tile{ width:92%; max-width:380px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); padding:16px; text-align:center; color:var(--white); box-shadow: 0 10px 28px rgba(0,0,0,0.55); cursor:pointer; }
.tile.large{ min-height:114px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tile.small{ min-height:84px; display:flex; align-items:center; gap:12px; padding:12px; justify-content:center; }
.tile img{ width:48px; height:48px; object-fit:cover; border-radius:8px; }

/* tile text */
.tile-title{ font-size:18px; font-weight:800; letter-spacing:0.6px; }

/* === CHANGED: subheadings now pure white === */
.tile-sub{ color:#fff; margin-top:8px; font-size:13px; }

/* centered tile text class used for pages 3 & 4 */
.centered-tiletext{ text-align:center; width:100%; }

/* rank row */
.rank-row{ display:flex; gap:12px; width:92%; max-width:380px; justify-content:space-between; }
.rank-small{ flex:1; padding:12px; border-radius:12px; background:var(--panel); border:1px solid var(--border); text-align:center; }
.rank-title{ color:var(--muted); font-weight:700; margin-bottom:8px; font-size:13px; }
.rank-value{ font-weight:900; font-size:20px; }

/* challenge */
.challenge-row{ margin-top:12px; display:flex; gap:8px; width:100%; }
.challenge-row input{ flex:1; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--white); font-family:"Orbitron",sans-serif; }

/* profile */
.profile-card{ width:92%; max-width:420px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.profile-top{ display:flex; gap:12px; align-items:center; }
.profile-img{ width:82px; height:82px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,0.04); }
.profile-meta{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.pname{ font-weight: 800; font-size: 18px; }

/* === CHANGED: muted text also pure white === */
.muted { color: #fff; }

/* wallet widget small */
.wallet-widget.small{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--panel); width:100%; border:1px solid var(--border); }
.wallet-widget.small img{ width:44px; height:44px; object-fit:cover; border-radius:8px; }
.wallet-info{ display:flex; flex-direction:column; }

/* recent matches */
.recent-matches{ width:100%; max-height:170px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:8px; }
.match-item{ display:flex; gap:12px; align-items:center; padding:8px; border-radius:10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); width:100%; }
.match-item img{ width:44px; height:44px; object-fit:cover; border-radius:8px; }

/* tiny hint & dots - HIDDEN */
.tiny-hint-wrap{ position:fixed; left:50%; transform:translateX(-50%); bottom:112px; z-index:60; pointer-events:auto; display: none; }
.tiny-hint{ display:inline-block; background:rgba(255,255,255,0.03); padding:8px 18px; border-radius:999px; color:var(--white); font-size:12px; max-width:85vw; white-space:nowrap; overflow:hidden; cursor:pointer; transition:opacity .24s; }
.marquee-inner{ display:inline-block; padding-left:18px; }

/* pager: keep dots in DOM for accessibility/JS, hide actual dot visuals, show data-page attribute via ::after */
.dots{ position:fixed; left:50%; transform:translateX(-50%); bottom:84px; display:flex; gap:6px; z-index:61; }
.dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.03); transition:transform .14s; display:none; }

/* dynamic page indicator: current page (1) in glowing red, total (/5) in white */
.dots::after{
  content: attr(data-page);
  display:inline-block;
  font-weight:900;
  font-family:"Orbitron",sans-serif;
  letter-spacing:0.6px;
  font-size: 14px;
  color: transparent;
  /* --- REPLACED LINE 1 (for color stop) --- */
  background: linear-gradient(90deg, var(--neon) 0%, var(--neon) 30%, var(--white) 30%, var(--white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* --- REPLACED LINE 2 (for white glow) --- */
  text-shadow: 0 0 8px rgba(255,7,58,0.6), 0 0 8px rgba(255,255,255,0.6);
  filter: drop-shadow(0 0 6px rgba(255,7,58,0.4));
}

/* bottom nav */
.bottom-nav{ position:fixed; left:12px; right:12px; bottom:18px; display:flex; gap:12px; z-index:70; max-width:var(--phone-w); margin:auto; }
.b-nav{ flex:1; padding:12px; border-radius:12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); font-weight:800; text-align:center; color:var(--white); font-family:"Orbitron",sans-serif; font-size: 16px; cursor: pointer; }
.b-center{ background:rgba(255,255,255,0.02); color:var(--white); }
.b-freefire{ padding: 8px; }
.b-freefire img{ width:100%; height:100%; max-height: 28px; object-fit:contain; border-radius:10px; }

/* edges */
.edge{ position:fixed; top:0; bottom:0; width:48px; z-index:20; }
.left-edge{ left:0 } .right-edge{ right:0 }

/* modal/backdrop */
.backdrop{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); z-index:200; backdrop-filter: blur(4px); }
.modal{ width:94%; max-width:480px; max-height:85vh; overflow:auto; padding:20px; background:#070707; border-radius:12px; border:1px solid rgba(255,255,255,0.04); color:var(--white); }
.close{ float:right; background:transparent; border:none; color:var(--muted); font-size:18px; cursor:pointer; }

/* buttons */
.btn{ padding:10px 14px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.1); color:var(--white); font-weight:800; cursor:pointer; font-family:"Orbitron",sans-serif; }
.btn.primary{ background:var(--neon); color:#fff; border:none; }

/* NEW STYLE FOR MODAL INPUTS */
.modal-input {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  background-color: #222;
  color: white;
  border: 1px solid #444;
  border-radius: 8px;
  font-family: "Orbitron", sans-serif;
  font-size: 15px;
}
.modal-input::placeholder {
  color: #888;
}

/* responsive */
@media(min-width:820px){
  body{ justify-content:center; }
  .app{ margin:18px auto; border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.7); }
}