:root{
  --bg:#070b0f;
  --panel:#0f151b;
  --panel2:#121a22;
  --line:#25313d;
  --text:#f5f7fa;
  --muted:#8493a3;
  --cyan:#5fd7ff;
  --gold:#d7aa54;
  --danger:#ff6b62;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(circle at 70% -10%,#17222d 0,#090e13 35%,#070b0f 70%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif}
body{min-height:100vh}
button{font:inherit;color:inherit}
.app-shell{max-width:560px;margin:0 auto;min-height:100vh;padding:calc(82px + env(safe-area-inset-top) + var(--tg-content-safe-area-inset-top,0px)) 18px calc(170px + env(safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom,0px))}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted);font-weight:800}
h1,h2,h3,p{margin:0}
h1{font-size:24px;letter-spacing:.02em;margin-top:3px}
.status-pill{border:1px solid #2b3c48;background:#0d151b;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:800;letter-spacing:.12em}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff4f48;margin-right:7px;box-shadow:0 0 10px #ff4f48}
.hero-card{border:1px solid var(--line);background:linear-gradient(160deg,#141d26,#0d1319);border-radius:26px;padding:18px;box-shadow:0 22px 60px rgba(0,0,0,.25)}
.hero-top{display:flex;align-items:center;gap:13px}
.avatar{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#253545,#151f29);border:1px solid #344658;display:grid;place-items:center;font-weight:900;letter-spacing:.08em}
.avatar.small{width:42px;height:42px;border-radius:14px;font-size:12px}
.hero-copy{min-width:0;flex:1}
.label{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.15em}
.player-line{display:flex;align-items:center;gap:8px;margin:2px 0 2px}
.player-line h2{font-size:27px}
.crest,.gold-seal{display:grid;place-items:center;background:linear-gradient(145deg,#f0d38a,#9d6b20);color:#16120a;border:1px solid #f1d99a;font-weight:1000;box-shadow:0 0 18px rgba(215,170,84,.2)}
.crest{width:25px;height:25px;clip-path:polygon(25% 6%,75% 6%,94% 25%,94% 75%,75% 94%,25% 94%,6% 75%,6% 25%);font-size:12px}
.subline{font-size:12px;color:var(--muted)}
.health-badge{font-size:18px;font-weight:900}
.meters{display:grid;gap:10px;margin:18px 0}
.meter-row{display:grid;grid-template-columns:34px 1fr 30px;align-items:center;gap:8px;font-size:11px;font-weight:800;color:var(--muted)}
.meter-row b{color:var(--text);text-align:right}
.meter{height:7px;background:#1c2731;border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#5fd7ff,#a5f0ff);border-radius:999px}
.meter.bat i{background:linear-gradient(90deg,#d5a84d,#f4dc98)}
.hero-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.primary,.ghost{border-radius:15px;padding:13px 15px;font-weight:900;font-size:12px;letter-spacing:.08em}
.primary{border:0;background:var(--text);color:#081017}
.ghost{border:1px solid var(--line);background:#10171d}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:26px 2px 12px}
.section-head h3{font-size:18px;margin-top:3px}
.section-head>span{font-size:11px;color:var(--muted)}
.players{display:grid;gap:10px}
.player-card{width:100%;border:1px solid var(--line);background:rgba(15,21,27,.92);border-radius:18px;padding:12px;display:flex;align-items:center;gap:12px;text-align:left}
.player-card.hot{border-color:#394b5c;box-shadow:inset 0 0 0 1px rgba(95,215,255,.08)}
.pinfo{flex:1}
.name-row{display:flex;align-items:center;gap:7px}
.pinfo>span{font-size:11px;color:var(--muted)}
.hp{font-weight:900}
.hp.danger{color:var(--danger)}
.rank-badge{font-size:9px;border:1px solid #536476;border-radius:8px;padding:2px 5px;color:#d8e2eb}
.tiny-live{font-size:8px;padding:2px 5px;border-radius:999px;background:#5c1f1f;color:#ffaaa6;font-weight:900}
.sponsor-card{margin-top:18px;border:1px solid rgba(215,170,84,.3);background:linear-gradient(145deg,rgba(92,63,21,.22),rgba(15,18,20,.95));border-radius:20px;padding:16px;display:flex;align-items:center;justify-content:space-between}
.sponsor-card h3{font-size:20px;margin-top:2px}
.sponsor-card p{font-size:11px;color:var(--muted);margin-top:4px}
.gold-seal{width:44px;height:44px;clip-path:polygon(25% 6%,75% 6%,94% 25%,94% 75%,75% 94%,25% 94%,6% 75%,6% 25%)}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom,0px));width:min(524px,calc(100% - 28px));background:rgba(12,17,22,.94);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:20px;padding:7px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.bottom-nav button{border:0;background:transparent;color:var(--muted);padding:11px;border-radius:14px;font-size:10px;font-weight:900;letter-spacing:.12em}
.bottom-nav button.active{background:#17212b;color:var(--text)}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.64);display:none;align-items:flex-end;justify-content:center;padding:12px}
.sheet.show{display:flex}
.sheet-card{width:min(560px,100%);background:#111820;border:1px solid var(--line);border-radius:26px;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
.drag{width:44px;height:4px;background:#3a4650;border-radius:999px;margin:0 auto 18px}
.sheet-card h2{font-size:30px;margin:3px 0 6px}
.sheet-copy{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:16px}
.effect-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.effect-grid button{border:1px solid var(--line);background:#17212a;border-radius:15px;padding:16px 10px;font-size:11px;font-weight:900;letter-spacing:.08em}
.full{width:100%}