:root{
  --glass:rgba(255,255,255,.08);
  --glass-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.62);
  --green:#22c55e;
  --red:#ef4444;
  --amber:#f59e0b;
  --nato:#2f6fb4;
  --ussr:#bf2f3a;
  --shadow:0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(191,47,58,.20), transparent 35%),
    radial-gradient(circle at top right, rgba(47,111,180,.18), transparent 35%),
    linear-gradient(160deg, #050b11 0%, #0a121b 45%, #081018 100%);
  overflow-x:hidden;
}
body::before, body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
body::before{
  width:65vw;
  left:-6vw;
  right:auto;
  background:
    linear-gradient(180deg,
      rgba(191,47,58,.22) 0 33.33%,
      rgba(205,182,47,.12) 33.33% 66.66%,
      rgba(191,47,58,.22) 66.66% 100%);
  clip-path: polygon(0 0, 92% 0, 70% 100%, 0 100%);
  filter: blur(8px) saturate(1.1);
  opacity:.58;
}
body::after{
  width:65vw;
  right:-6vw;
  left:auto;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.10) 0 6%, transparent 6.5%),
    linear-gradient(90deg, transparent 47%, rgba(255,255,255,.12) 47% 53%, transparent 53%),
    linear-gradient(180deg, transparent 47%, rgba(255,255,255,.12) 47% 53%, transparent 53%),
    linear-gradient(160deg, rgba(47,111,180,.23), rgba(47,111,180,.10));
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 8% 100%);
  filter: blur(8px);
  opacity:.58;
}
.overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background:
    linear-gradient(180deg, rgba(5,8,12,.36), rgba(5,8,12,.24)),
    radial-gradient(circle at center, transparent 0%, rgba(5,8,12,.18) 100%);
}
.noise{
  position:fixed; inset:0; z-index:2; opacity:.06; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.9) 0.4px, transparent 0.8px);
  background-size:8px 8px; mix-blend-mode:soft-light;
}
.app{
  position:relative; z-index:3; min-height:100%;
  max-width:460px; margin:0 auto;
  padding: calc(env(safe-area-inset-top) + 2px) 16px calc(env(safe-area-inset-bottom) + 132px) 16px;
}
.topbar{ margin-bottom:14px; padding-top:8px; }
.brand h1{
  margin:0; font-size:24px; line-height:1; letter-spacing:.08em; font-weight:800; text-transform:uppercase;
}
.brand p{
  margin:8px 0 0; color:var(--muted); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
}
.view{ display:none; }
.view.active{ display:block; }
.stack{ display:grid; gap:12px; }
.card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(180deg, var(--glass), var(--glass-2));
  border:1px solid var(--border); box-shadow:var(--shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.card::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(255,255,255,.04));
  pointer-events:none;
}
.hero{ padding:16px; min-height:150px; }
.mini{ padding:14px; }
.label-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px;
}
.status{
  display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted);
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.dot{
  width:11px; height:11px; border-radius:999px; background:var(--green);
  box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:pulse 2s infinite; flex:0 0 auto;
}
.dot.offline{ background:var(--red); box-shadow:none; animation:none; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow: 0 0 0 12px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.badge{
  padding:7px 10px; border-radius:999px; color:rgba(255,255,255,.92); font-size:12px; font-weight:700;
  background:rgba(47,111,180,.18); border:1px solid rgba(47,111,180,.30);
}
.kicker{
  font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700;
}
.hero-title{
  margin:8px 0 2px; font-size:28px; font-weight:800; line-height:1.02;
}
.hero-sub{ color:var(--muted); font-size:14px; }
.hero-metrics{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:14px;
}
.players-big{
  font-size:38px; font-weight:800; line-height:1; letter-spacing:-0.03em;
}
.players-big span{
  font-size:16px; color:var(--muted); font-weight:600; letter-spacing:0; margin-left:6px;
}
.join-code{
  padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10); text-align:right; min-width:114px;
}
.join-code .title{
  display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;
}
.join-code strong{ font-size:18px; letter-spacing:.08em; }
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
}
.section-head h2{
  margin:0; font-size:15px; font-weight:700; letter-spacing:.02em;
}
.section-head a, .small-note{
  text-decoration:none; color:var(--muted); font-size:13px; font-weight:600;
}
.progress-label{
  display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:13px; margin-bottom:8px;
}
.bar{
  height:11px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
}
.bar>span{
  display:block; height:100%; width:0%;
  border-radius:inherit; background:linear-gradient(90deg, rgba(191,47,58,.75) 0%, rgba(47,111,180,.9) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}
.list, .feed, .settings-list{ display:grid; gap:8px; }
.row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px;
  border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
}
.user{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  color:rgba(255,255,255,.95); background:linear-gradient(135deg, rgba(191,47,58,.32), rgba(47,111,180,.32));
  border:1px solid rgba(255,255,255,.10); flex:0 0 auto;
}
.name-wrap{ min-width:0; }
.name{
  font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sub{
  margin-top:2px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tag{
  color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; flex:0 0 auto;
}
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.04em;
}
.pill.active{ color:var(--text); background:rgba(47,111,180,.18); border-color:rgba(47,111,180,.30); }
.toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.switch-ui{
  width:52px; height:32px; border-radius:999px; background:rgba(47,111,180,.35);
  border:1px solid rgba(255,255,255,.12); position:relative; flex:0 0 auto;
}
.switch-ui::after{
  content:""; width:24px; height:24px; border-radius:50%; position:absolute; top:3px; right:3px; background:rgba(255,255,255,.95);
}
.divider{ height:1px; background:rgba(255,255,255,.08); margin:12px 0; }
.empty{ padding:22px 14px; text-align:center; color:var(--muted); font-size:13px; }
.bottom-nav{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 28px);
  transform:translateX(-50%); width:min(408px, calc(100vw - 36px)); z-index:20; pointer-events:none;
}
.bottom-shell{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:7px; border-radius:18px;
  background:rgba(10,16,24,.56); border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow:0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06); pointer-events:auto;
}
.nav-item{
  border:0; padding:8px 6px; border-radius:13px; background:transparent; color:var(--muted);
  display:grid; gap:4px; justify-items:center; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; min-width:0;
}
.nav-item span:first-child{ font-size:16px; line-height:1; }
.nav-item span:last-child{ white-space:nowrap; }
.nav-item.active{
  color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.08);
}