:root{
--bg:#0b1220;--surface:#121a2b;--accent:#3b82f6;
--text:#e5e7eb;--muted:#9ca3af;
--r-sm:8px;--r-md:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui;padding-bottom:90px}
.app-header{height:56px;display:flex;justify-content:space-between;align-items:center;
padding:0 12px;background:rgba(11,18,32,.92);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.06)}
.header-left,.header-right{display:flex;align-items:center;gap:10px}
.logo{font-weight:800}.logo span{color:var(--accent)}
.icon-btn{width:36px;height:36px;border:none;background:none;color:var(--text);font-size:20px}
.wallet-pill{background:var(--surface);padding:6px 10px;border-radius:var(--r-md);font-size:13px}
.deposit-btn{height:34px;padding:0 12px;border-radius:var(--r-md);
background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;color:#fff;font-weight:700}
.profile-wrap{position:relative}
.avatar{width:32px;height:32px;border-radius:50%}
.profile-menu{display:none;position:absolute;right:0;top:44px;background:var(--surface);
border-radius:12px;min-width:160px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.profile-menu a{display:block;padding:10px 14px;color:var(--text);text-decoration:none}
.profile-menu .divider{height:1px;background:rgba(255,255,255,.06)}
.profile-menu .danger{color:#ef4444}

.drawer{position:fixed;left:-260px;top:0;width:240px;height:100%;background:var(--surface);
padding:70px 20px;transition:.3s;z-index:50}
.drawer.show{left:0}
.drawer a{display:block;margin-bottom:16px}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40}
.overlay.show{display:block}

.banner{padding:12px}
.banner-card{height:140px;border-radius:16px;
background:linear-gradient(135deg,#1e3a8a,#2563eb);
display:flex;align-items:center;justify-content:center;font-weight:800}

.section{padding:12px}
.h-scroll{display:flex;gap:12px;overflow-x:auto}
.game-card{width:140px;height:180px;border-radius:14px;
background:linear-gradient(180deg,#1e293b,#0f172a)}
.game-card.large{width:220px}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:70px;
background:#0f172a;display:flex;align-items:center}
.bottom-nav a{flex:1;text-align:center;color:var(--muted)}
.fab{width:56px;height:56px;border-radius:50%;
background:linear-gradient(135deg,#3b82f6,#2563eb);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:800;transform:translateY(-18px)}
.profile {
  position: relative;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

/* DROPDOWN */
.profile-dropdown {
  position: absolute;
  right: 0;
  top: 54px;
  width: 240px;
  background: linear-gradient(180deg, #0b1220, #020617);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  padding: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .25s ease;
  z-index: 999;
}

/* SHOW */
.profile:hover .profile-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* HEADER */
.profile-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 6px;
}

.profile-head img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.profile-head strong {
  display: block;
  font-size: 14px;
}

.profile-head span {
  font-size: 12px;
  color: #38bdf8;
}

/* ITEMS */
.profile-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  color: #e5e7eb;
  text-decoration: none;
  transition: .2s;
}

.profile-dropdown a:hover {
  background: rgba(56,189,248,.12);
  color: #38bdf8;
}

/* ICON */
.profile-dropdown .icon {
  width: 18px;
  text-align: center;
  opacity: .9;
}

/* DIVIDER */
.profile-dropdown .divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 8px 0;
}

/* LOGOUT */
.profile-dropdown .logout {
  color: #f87171;
}

.profile-dropdown .logout:hover {
  background: rgba(248,113,113,.12);
}