:root{
  --bg0:#05070b;
  --bg1:#070b12;
  --card:rgba(16,22,34,.62);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.16);
  --txt:#eef3ff;
  --mut:rgba(238,243,255,.70);

  --acc:#5af2ff;
  --acc2:#a855f7;
  --good:#3dff9a;
  --bad:#ff4d6d;

  --r16:16px;
  --r20:20px;
  --shadow:0 20px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(1200px 800px at 20% 10%, rgba(90,242,255,.10), transparent 55%),
             radial-gradient(1000px 700px at 80% 80%, rgba(168,85,247,.12), transparent 55%),
             linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--txt);
  overflow-x:hidden;
}

a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.bg:before{
  content:"";
  position:absolute;inset:-40px;
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(90,242,255,.14), transparent 60%),
    radial-gradient(900px 600px at 85% 85%, rgba(168,85,247,.14), transparent 60%);
  filter:blur(0px);
}
.glow{
  position:absolute;
  width:520px;height:520px;border-radius:999px;
  filter:blur(70px);
  opacity:.55;
  animation: float 8s ease-in-out infinite;
}
.glow.g1{left:-180px;top:-160px;background:var(--acc)}
.glow.g2{right:-200px;bottom:-200px;background:var(--acc2);animation-delay:-2.5s}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(25px,18px,0) scale(1.05)}
}

.scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    transparent 2px,
    transparent 6px
  );
  opacity:.08;
  mix-blend-mode:overlay;
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px 28px;
}

.shell{
  width:min(520px, 100%);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.brand{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border-radius:var(--r20);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.brand:after{
  content:"";
  position:absolute;inset:-2px;
  background:radial-gradient(500px 80px at 30% 0%, rgba(90,242,255,.18), transparent 60%),
             radial-gradient(500px 80px at 70% 100%, rgba(168,85,247,.16), transparent 60%);
  pointer-events:none;
}
.brand .mark{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  font-size:26px;
  position:relative;z-index:1;
}
.brand .t{position:relative;z-index:1}
.brand h1{margin:0;font-size:18px;letter-spacing:.4px}
.brand p{margin:4px 0 0;color:var(--mut);font-size:12.5px;line-height:1.35}

.card{
  padding:14px;
  border-radius:var(--r20);
  border:1px solid var(--stroke);
  background:var(--card);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.card:before{
  content:"";
  position:absolute;inset:-1px;
  background:linear-gradient(120deg,
    rgba(90,242,255,.20),
    rgba(255,255,255,0) 35%,
    rgba(168,85,247,.18) 70%,
    rgba(255,255,255,0)
  );
  opacity:.35;
  pointer-events:none;
}
.card > *{position:relative;z-index:1}

.tabs{display:flex;gap:10px;margin-bottom:12px}
.tab{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  text-align:center;
  font-weight:800;
  letter-spacing:.3px;
  color:rgba(238,243,255,.62);
  transition:.15s ease;
}
.tab.active{
  color:var(--txt);
  border-color:rgba(90,242,255,.35);
  background:linear-gradient(180deg, rgba(90,242,255,.18), rgba(90,242,255,.06));
  box-shadow:0 0 0 2px rgba(90,242,255,.10) inset;
}

.alert{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.20);
  font-size:13px;
  margin-bottom:10px;
}
.alert.err{
  border-color:rgba(255,77,109,.35);
  box-shadow:0 0 0 2px rgba(255,77,109,.10) inset;
}
.alert.ok{
  border-color:rgba(61,255,154,.30);
  box-shadow:0 0 0 2px rgba(61,255,154,.08) inset;
}

.form{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:6px}
.lbl{font-size:12px;color:var(--mut);letter-spacing:.2px}

.inpWrap{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  transition:.15s ease;
}
.inpWrap:focus-within{
  border-color:rgba(90,242,255,.38);
  box-shadow:0 0 0 3px rgba(90,242,255,.12);
}
.icon{width:18px;height:18px;opacity:.85;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.inp{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color:var(--txt);
  font-size:14px;
}
.inp::placeholder{color:rgba(238,243,255,.35)}

.row2{display:flex;gap:10px;flex-wrap:wrap}
.row2 .field{flex:1 1 180px}

.btn{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--txt);
  font-weight:900;
  letter-spacing:.5px;
  text-align:center;
  cursor:pointer;
  transition:.12s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  border-color:rgba(90,242,255,.38);
  background:linear-gradient(180deg, rgba(90,242,255,.22), rgba(90,242,255,.08));
  box-shadow:0 0 0 2px rgba(90,242,255,.10) inset;
}
.btn.secondary{
  border-color:rgba(168,85,247,.28);
  background:linear-gradient(180deg, rgba(168,85,247,.18), rgba(168,85,247,.06));
}

.hint{margin-top:2px;font-size:12px;color:rgba(238,243,255,.55);text-align:center}

.feature{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
}
.feature .dot{
  width:10px;height:10px;border-radius:999px;
  margin-top:4px;
  background:var(--acc);
  box-shadow:0 0 0 4px rgba(90,242,255,.10);
}
.feature h3{margin:0;font-size:13.5px}
.feature p{margin:3px 0 0;color:var(--mut);font-size:12.5px;line-height:1.35}

.foot{text-align:center;color:rgba(238,243,255,.45);font-size:12px;padding:6px 0}

/* ===== Character page ===== */
body.page-character{
  margin:0 !important;
  min-height:100%;
}
.page-character .c-wrap{max-width:980px;margin:0 auto;padding:16px}
.page-character .c-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.page-character .c-ava{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:34px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.page-character .c-title{display:flex;flex-direction:column;gap:2px}
.page-character .c-name{font-size:20px;font-weight:800;letter-spacing:.2px}
.page-character .c-rank{opacity:.75;font-size:13px}
.page-character .c-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media (min-width:860px){.page-character .c-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.page-character .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px}
.page-character .k{opacity:.7;font-size:12px}
.page-character .v{font-size:20px;font-weight:800;margin-top:4px}
.page-character .bar{height:10px;border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-top:10px}
.page-character .bar > i{display:block;height:100%;width:0%}
.page-character .row{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.page-character .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.page-character .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;width:auto}
.page-character .btn.primary{background:rgba(90,242,255,.12);border-color:rgba(90,242,255,.20)}
.page-character .bar.hp > i{background:rgba(255,77,109,.85)}
.page-character .bar.xp > i{background:rgba(61,255,154,.85)}

/* ===== Shared inventory/shop shell ===== */
body.page-shop,
body.page-weapons{
  --card: rgba(18, 24, 40, .62);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  margin:0 !important;
  min-height:100%;
  color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(90,242,255,.10), transparent 55%),
    radial-gradient(900px 600px at 82% 18%, rgba(168,85,247,.10), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
.page-shop .container,
.page-weapons .container{max-width:1280px;margin:0 auto;padding:14px 16px 28px}
.page-shop .appbar,
.page-weapons .appbar{
  position:sticky;top:0;z-index:50;padding:10px 0 12px;
  background:linear-gradient(180deg, rgba(5,7,11,.96), rgba(5,7,11,.60), transparent);
  backdrop-filter:blur(10px);
}
.page-shop .bar,
.page-weapons .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-shop .title,
.page-weapons .title{display:flex;flex-direction:column;gap:3px;min-width:240px}
.page-shop .title .h1,
.page-weapons .title .h1{font-size:22px;font-weight:950;letter-spacing:.2px}
.page-shop .title .sub,
.page-weapons .title .sub{font-size:13px;color:var(--mut)}
.page-shop .right,
.page-weapons .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-shop .tabs,
.page-weapons .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0}
.page-shop .tabbtn,
.page-weapons .tabbtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--txt);text-decoration:none;
  font-weight:950;white-space:nowrap;
  box-shadow:0 10px 25px rgba(0,0,0,.30);
}
.page-shop .tabbtn.active,
.page-weapons .tabbtn.active{
  border-color:rgba(90,242,255,.38);
  background:rgba(90,242,255,.14);
}
.page-shop .chip,
.page-weapons .chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-weight:900;white-space:nowrap;
}
.page-shop .chip .val,
.page-weapons .chip .val{font-weight:950}
.page-shop .btn-back,
.page-weapons .btn-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:14px;
  color:var(--txt);text-decoration:none;
  background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  box-shadow:0 14px 35px rgba(0,0,0,.35);
  white-space:nowrap;
}
.page-shop .alert,
.page-weapons .alert{
  margin:10px 0 0;
  padding:12px 14px;border-radius:var(--r16);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
}
.page-shop .alert.ok,
.page-weapons .alert.ok{border-color:rgba(61,255,154,.25);background:rgba(61,255,154,.07)}
.page-shop .alert.err,
.page-weapons .alert.err{border-color:rgba(255,77,109,.28);background:rgba(255,77,109,.07)}
.page-shop .alert b,
.page-weapons .alert b{font-weight:950}
.page-shop .grid,
.page-weapons .grid{margin-top:14px;display:grid;gap:12px;align-items:start;justify-content:center;grid-template-columns:1fr}
@media (min-width:760px){
  .page-shop .grid,
  .page-weapons .grid{grid-template-columns:repeat(2, minmax(320px,1fr));}
}
@media (min-width:1120px){
  .page-shop .grid,
  .page-weapons .grid{grid-template-columns:repeat(3, minmax(320px,1fr));}
}
.page-shop .card,
.page-weapons .card{
  position:relative;border-radius:var(--r20);
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  overflow:hidden;padding:14px;min-width:0;
}
.page-shop .card::before,
.page-weapons .card::before{
  content:"";position:absolute;inset:-2px -2px auto -2px;height:92px;
  background:
    radial-gradient(420px 130px at 20% 0%, rgba(90,242,255,.18), transparent 55%),
    radial-gradient(420px 140px at 80% 0%, rgba(168,85,247,.16), transparent 55%);
  pointer-events:none;
}
.page-shop .head,
.page-weapons .head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative}
.page-shop .wname,
.page-weapons .wname{font-size:18px;font-weight:950;letter-spacing:.2px}
.page-shop .wdescr,
.page-weapons .wdescr{margin-top:4px;color:var(--mut);font-size:13px;line-height:1.35}
.page-shop .tag,
.page-weapons .tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.05);
  font-size:12px;font-weight:950;white-space:nowrap;flex:0 0 auto;
}
.page-shop .media,
.page-weapons .media{
  position:relative;margin-top:10px;
  border-radius:16px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  height:150px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.page-shop .weapon-img,
.page-weapons .weapon-img{width:100%;height:100%;object-fit:contain;filter:none}
.page-shop .stats,
.page-weapons .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;position:relative}
.page-shop .stat,
.page-weapons .stat{
  border-radius:14px;padding:10px 10px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.page-shop .stat .k,
.page-weapons .stat .k{color:var(--mut)}
.page-shop .stat .v,
.page-weapons .stat .v{font-weight:950}
.page-shop .footer,
.page-weapons .footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;position:relative;flex-wrap:wrap}
.page-weapons .btn,
.page-shop .buy{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:16px;
  border:1px solid rgba(90,242,255,.35);
  background:rgba(90,242,255,.16);
  color:var(--txt);font-weight:950;cursor:pointer;
  box-shadow:0 18px 45px rgba(0,0,0,.40);
  text-decoration:none;width:auto;
}
.page-weapons .btn{min-width:140px}
.page-shop .buy{min-width:132px}
.page-weapons .btn:disabled,
.page-shop .buy:disabled{opacity:.45;cursor:not-allowed;border-color:var(--stroke);background:rgba(255,255,255,.05);box-shadow:none}
.page-weapons .btn.secondary{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  min-width:120px;
}
.page-shop .note,
.page-weapons .note{margin-top:10px;color:rgba(238,243,255,.65);font-size:12px;position:relative}

/* ===== Zombie Waves Lobby (menu.php) ===== */
.zw-body{ margin:0; background:transparent; }
.zw-bg{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.zw-bg-blur{
  position:absolute; inset:-30px;
  background:
    radial-gradient(800px 600px at 50% 60%, rgba(255,70,70,.10), transparent 62%),
    radial-gradient(900px 600px at 20% 20%, rgba(90,242,255,.15), transparent 62%),
    radial-gradient(900px 600px at 80% 80%, rgba(168,85,247,.18), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  filter:saturate(1.10) contrast(1.05);
}
.zw-screen{
  min-height:100vh;
  padding:8px 8px 92px;
  position:relative;
}

/* Top bar */
.zw-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 8px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
  border-radius:18px;
  box-shadow:0 12px 44px rgba(0,0,0,.55);
}
.zw-top-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.zw-avatar{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  font-size:18px;
}
.zw-player{ min-width:0; }
.zw-player-name{
  font-weight:1000; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zw-player-sub{ font-size:11.5px; color:var(--mut); margin-top:1px; }

.zw-top-right{ display:flex; align-items:center; gap:7px; }
.zw-pill{
  display:flex; align-items:center; gap:6px;
  padding:7px 9px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.28);
  font-weight:1000;
}
.zw-pill .zw-v{ font-size:12.5px; }
.zw-iconbtn{
  width:38px; height:38px; border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.28);
  color:var(--txt);
  font-weight:1000;
}

/* Side rails */
.zw-rail{
  position:fixed;
  top:70px;
  display:flex; flex-direction:column; gap:6px;
  width:72px;
  z-index:5;
}
.zw-rail-left{ left:8px; }
.zw-rail-right{ right:8px; }

.zw-railbtn{
  display:flex; flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
  padding:9px 6px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.26);
  color:var(--txt);
  text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.30);
}
.zw-railico{ font-size:18px; }
.zw-raillbl{
  font-size:9px;
  color:rgba(238,243,255,.70);
  text-align:center;
  line-height:1.05;
}

/* Center */
.zw-center{
  margin-top:10px;
  padding:0 86px;
}
@media (max-width: 420px){ .zw-center{ padding:0 82px; } }
@media (max-width: 360px){ .zw-center{ padding:0 78px; } }

/* Stage selector */
.zw-stage{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  margin-bottom:10px;
}
.zw-stage-nav{
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--txt);
  font-weight:1000;
}
.zw-stage-title{ font-weight:1100; letter-spacing:.2px; font-size:18px; }
.zw-stage-sub{ font-size:12px; color:var(--mut); margin-top:2px; }

/* Hero card */
.zw-heroCard{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 30px 90px rgba(0,0,0,.62);
  padding:12px;
  position:relative;
  overflow:hidden;
}
.zw-heroCard:before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 140px at 30% 0%, rgba(90,242,255,.18), transparent 62%),
    radial-gradient(520px 140px at 70% 100%, rgba(168,85,247,.16), transparent 62%),
    radial-gradient(700px 280px at 50% 70%, rgba(0,0,0,.55), transparent 60%);
  opacity:.70;
  pointer-events:none;
}
.zw-hero{
  position:relative;
  height:430px;
  display:grid;
  place-items:center;
}
.zw-hero-shadow{
  position:absolute;
  bottom:52px;
  width:230px; height:54px;
  background:rgba(0,0,0,.55);
  filter:blur(18px);
  border-radius:999px;
}
.zw-hero-sprite{
  position:relative;
  font-size:128px;
  transform: translateY(10px);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.65));
}
.zw-hero-tag{
  position:absolute;
  top:12px; left:12px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.26);
  font-size:12px;
  font-weight:1000;
}

/* Loot row */
.zw-miniLoot{ display:flex; gap:8px; padding-top:10px; }
.zw-loot{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.26);
  color:var(--txt);
  font-weight:1000;
}
.zw-lootTxt{ font-size:12.5px; color:rgba(238,243,255,.90); }

/* Start bar */
.zw-startbar{
  position:fixed;
  left:8px; right:8px;
  bottom:74px;
  display:grid;
  grid-template-columns: 90px 1fr 120px;
  gap:10px;
  align-items:stretch;
  z-index:6;
}
.zw-stageChip{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.26);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px 10px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.zw-stageChipTop{ font-size:11px; color:var(--mut); font-weight:1000; }
.zw-stageChipMain{ font-size:20px; font-weight:1100; margin-top:2px; }

.zw-start{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,96,96,.95), rgba(205,40,40,.95));
  box-shadow:0 28px 85px rgba(0,0,0,.70);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.zw-start:before{
  content:"";
  position:absolute; inset:-2px;
  background:radial-gradient(520px 140px at 50% 0%, rgba(255,255,255,.28), transparent 65%);
  pointer-events:none;
}
.zw-startMain{ font-size:28px; font-weight:1200; letter-spacing:.9px; }
.zw-startSub{ margin-top:4px; font-size:12px; opacity:.95; font-weight:1000; }

.zw-challenge{
  border-radius:22px;
  border:1px solid rgba(168,85,247,.30);
  background:linear-gradient(180deg, rgba(168,85,247,.24), rgba(168,85,247,.10));
  color:var(--txt);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  font-weight:1100;
}
.zw-chTop{ font-size:11px; opacity:.75; margin-top:2px; }
.zw-chMain{ font-size:14px; }

/* Bottom nav */
.zw-bottom{
  position:fixed;
  left:8px; right:8px; bottom:8px;
  height:60px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.30);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:6px;
  padding:6px;
  z-index:7;
  backdrop-filter: blur(12px);
  box-shadow:0 16px 55px rgba(0,0,0,.55);
}
.zw-navitem{
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(238,243,255,.72);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-weight:1000;
}
.zw-navico{ font-size:16px; }
.zw-navlbl{ font-size:10px; }
.zw-navitem.active{
  color:var(--txt);
  border-color:rgba(90,242,255,.35);
  background:linear-gradient(180deg, rgba(90,242,255,.18), rgba(90,242,255,.06));
  box-shadow:0 0 0 2px rgba(90,242,255,.10) inset;
}
.zw-start[disabled]{
  opacity:.55;
  filter:saturate(.6);
  cursor:not-allowed !important;
}
/* ===== Game screen ===== */
.g-body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:#05070b;
  touch-action:none;
}

.g-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
}

/* HUD */
.g-hud{
  position:fixed;
  top:10px;
  left:10px;
  right:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  z-index:20;
  pointer-events:none;
}

.g-hud-left,.g-hud-right{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.g-pill{
  pointer-events:none;
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  font-weight:1000;
}

.g-exit{
  pointer-events:auto;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  color:rgba(238,243,255,.92);
  font-weight:1000;
  text-decoration:none;
}

/* Mobile controls */
.g-controls{
  position:fixed;
  left:0; right:0;
  bottom:0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  z-index:30;
  pointer-events:none;
}

.g-joy{
  width:140px;
  height:140px;
  position:relative;
  pointer-events:auto;
  touch-action:none;
}

.g-joy-base{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}

.g-joy-stick{
  position:absolute;
  left:50%;
  top:50%;
  width:66px;
  height:66px;
  margin-left:-33px;
  margin-top:-33px;
  border-radius:999px;
  border:1px solid rgba(90,242,255,.30);
  background:linear-gradient(180deg, rgba(90,242,255,.22), rgba(90,242,255,.08));
  box-shadow:0 0 0 3px rgba(90,242,255,.10) inset, 0 18px 50px rgba(0,0,0,.55);
  transform:translate(0px, 0px);
}

.g-fire{
  pointer-events:auto;
  width:130px;
  height:72px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,96,96,.95), rgba(205,40,40,.95));
  box-shadow:0 28px 85px rgba(0,0,0,.70);
  color:#fff;
  font-weight:1200;
  letter-spacing:.8px;
}

/* Game over overlay */
.g-over{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
}

.g-over-card{
  width:min(520px, 100%);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 30px 90px rgba(0,0,0,.62);
  padding:16px;
}

.g-over-title{
  font-size:24px;
  font-weight:1200;
  letter-spacing:.8px;
}

.g-over-sub{
  margin-top:6px;
  color:rgba(238,243,255,.75);
  font-size:13px;
}

.g-over-actions{
  margin-top:14px;
}
.g-pause-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 9999;
}
.g-perk{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.65);
  z-index: 9999;
}
.g-perk-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 520px){
  .g-perk-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
.g-perk-item{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius: 14px;
  padding: 12px;
}
.g-perk-item:hover{ background: rgba(255,255,255,.10); }
.g-perk-name{ font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.g-perk-desc{ opacity:.85; font-size: 13px; }
/* =========================
   ZW MENU UI (override)
   ========================= */

:root{
  --zw-bg0:#070A12;
  --zw-bg1:#0A1020;
  --zw-glass: rgba(255,255,255,.06);
  --zw-glass2: rgba(255,255,255,.09);
  --zw-line: rgba(255,255,255,.12);
  --zw-line2: rgba(255,255,255,.18);
  --zw-text: rgba(255,255,255,.92);
  --zw-sub: rgba(255,255,255,.65);
  --zw-sub2: rgba(255,255,255,.45);
  --zw-ac: rgba(120, 220, 255, .95);
  --zw-ac2: rgba(255, 120, 190, .95);
  --zw-ok: rgba(120, 255, 190, .95);
  --zw-shadow: 0 14px 40px rgba(0,0,0,.55);
  --zw-radius: 22px;
  --zw-radius2: 28px;
}

.zw-body{
  margin:0;
  background: var(--zw-bg0);
  color: var(--zw-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

.zw-bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 800px at 70% 65%, rgba(155,90,255,.18), transparent 55%),
    radial-gradient(900px 650px at 20% 25%, rgba(80,220,255,.16), transparent 55%),
    linear-gradient(180deg, var(--zw-bg1), var(--zw-bg0));
  z-index:-3;
}

.zw-bg-blur{
  position:absolute; inset:-40px;
  filter: blur(26px);
  opacity:.9;
}

.scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
  opacity:.25;
}

/* Screen + layout grid */
.zw-screen{
  min-height: 100svh;
  padding:
    calc(14px + env(safe-area-inset-top))
    14px
    calc(14px + env(safe-area-inset-bottom))
    14px;
  box-sizing:border-box;
}

.zw-layout{
  display:grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
}

/* Top bar */
.zw-top{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--zw-radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--zw-line);
  box-shadow: var(--zw-shadow);
  backdrop-filter: blur(10px);
}

.zw-top-left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.zw-avatar{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--zw-line);
}
.zw-player{ min-width:0; }
.zw-player-name{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.zw-player-sub{
  font-size: 12px;
  color: var(--zw-sub);
  margin-top: 2px;
}

.zw-top-right{
  display:flex; align-items:center; gap: 8px;
}

.zw-pill{
  display:flex; align-items:center; gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}
.zw-i{ opacity:.95; }
.zw-v{ font-weight: 800; font-size: 13px; }

.zw-iconbtn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--zw-text);
  font-size: 18px;
}

/* Left rail */
.zw-rail-left{
  grid-row: 2 / 3;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:stretch;
  justify-content:flex-start;
}

.zw-railbtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--zw-text);
  border-radius: 18px;
  padding: 10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.zw-railbtn:active{ transform: translateY(1px); }

.zw-railico{ font-size: 20px; }
.zw-raillbl{
  font-size: 11px;
  color: var(--zw-sub);
}

/* Center */
.zw-center{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display:flex;
  flex-direction:column;
  gap: 14px;
  min-width:0;
}

.zw-stage{
  padding: 14px 14px;
  border-radius: var(--zw-radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--zw-line);
  box-shadow: var(--zw-shadow);
  backdrop-filter: blur(10px);
}

.zw-stage-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}
.zw-stage-sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--zw-sub);
}

/* Hero card */
.zw-heroCard{
  flex:1;
  min-height: 360px;
  border-radius: 34px;
  background:
    radial-gradient(700px 520px at 50% 70%, rgba(120,220,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  overflow:hidden;
}

.zw-heroCard:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(320px 220px at 35% 30%, rgba(255,120,190,.14), transparent 60%),
    radial-gradient(340px 240px at 70% 65%, rgba(120,255,190,.10), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.zw-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  padding: 18px;
}

.zw-hero-sprite{
  font-size: 64px;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55));
}
.zw-hero-tag{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  font-weight: 800;
  color: rgba(255,255,255,.88);
}

/* Bottom area (start + nav) */
.zw-bottomArea{
  grid-column: 1 / -1;
  grid-row: 3 / 4;
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding-bottom: env(safe-area-inset-bottom);
}

.zw-startbar{
  display:flex;
  justify-content:flex-start;
}

.zw-start{
  width: min(260px, 72vw);
  height: 64px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,110,110,.95), rgba(230,70,90,.92));
  box-shadow: 0 18px 40px rgba(230,70,90,.28);
  color: rgba(255,255,255,.96);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding: 10px 16px;
}
.zw-start:active{ transform: translateY(1px); }
.zw-start[disabled]{
  opacity:.55;
  filter: grayscale(.4);
  box-shadow:none;
}

.zw-startMain{
  font-weight: 950;
  letter-spacing: .7px;
  font-size: 22px;
  line-height: 1;
}
.zw-startSub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.86);
}

/* Bottom nav pill */
.zw-bottom{
  display:flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 26px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  justify-content:space-between;
}

.zw-navitem{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--zw-sub);
  border-radius: 18px;
  padding: 8px 10px;
  min-width: 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 5px;
  flex:1;
}

.zw-navico{ font-size: 18px; }
.zw-navlbl{ font-size: 11px; }

.zw-navitem.active{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* Mobile tweaks */
@media (max-width: 430px){
  .zw-layout{ grid-template-columns: 68px 1fr; }
  .zw-start{ width: min(280px, 78vw); }
}