*{box-sizing:border-box}
:root{
  --bg:#071d29;
  --panel:#102a37;
  --panel-2:#0c2230;
  --line:#1a3543;
  --text:#fff;
  --blue:#1478df;
  --blue-2:#0e6fd1;
}
html,body{margin:0;min-height:100%;background:#20232b;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{display:flex;justify-content:center}
a{color:inherit;text-decoration:none}
.app{
  position:relative;
  width:100%;
  max-width:452px;
  min-height:100vh;
  background:var(--bg);
  overflow:hidden;
  padding-bottom:68px;
}
.header{
  height:75px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 16px;
  background:#142b38;
}
.icon-btn{
  width:30px;height:30px;padding:4px 0;border:0;background:none;
  display:flex;flex-direction:column;justify-content:center;gap:5px;flex:none
}
.icon-btn i{display:block;width:23px;height:3px;border-radius:3px;background:#fff}
.logo{position:relative;width:140px;height:52px;line-height:.78;font-style:italic;transform:skew(-7deg)}
.logo span{display:block;font-size:20px;font-weight:900;letter-spacing:-1px;margin:5px 0 0 17px}
.logo strong{display:block;font-size:28px;font-weight:900;letter-spacing:-2px}
.logo b{position:absolute;right:3px;top:1px;font-size:20px;transform:rotate(12deg)}
.auth{margin-left:auto;display:flex;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:35px;padding:0 18px;border-radius:7px;
  font-size:14px;font-weight:800;white-space:nowrap
}
.btn-login{background:#294354}
.btn-join{background:var(--blue)}
.promo-wrap{padding:10px 16px;background:#081e2a}
.promo-track{display:flex;gap:10px;overflow:hidden}
.promo{
  width:369px;height:205px;flex:0 0 369px;border-radius:7px;overflow:hidden;
  background:#19303b;display:block
}
.promo img{width:100%;height:100%;display:block;object-fit:cover}
.promo-alt{
  width:369px;padding:45px 16px;
  background:radial-gradient(circle at 60% 40%,#d89c20 0,#263d3e 25%,#132b38 65%);
}
.promo-alt div{display:flex;flex-direction:column;gap:20px}
.promo-alt strong{font-size:18px}
.promo-alt span{font-size:17px;font-weight:800}
.promo-alt .btn{width:122px}
.tabs{
  height:58px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  align-items:center;padding:0 18px;background:#142f3c
}
.tabs a{
  height:35px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:#0b2230;
  font-size:14px;font-weight:800;letter-spacing:1px
}
.tabs .active{border:2px solid var(--blue);background:#0b2230}
.games{padding:27px 18px 20px}
.games h2{margin:0 0 20px;font-size:16px;line-height:1;font-weight:800}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.game{
  position:relative;display:block;aspect-ratio:1/1;border-radius:4px;overflow:hidden;
  background:#172f3c
}
.game img{width:100%;height:100%;display:block;object-fit:cover}
.game span{
  position:absolute;left:0;top:0;width:34px;height:29px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,39,51,.9);font-size:17px;font-weight:800
}
.bottom-cta{
  position:fixed;z-index:5;bottom:8px;left:50%;transform:translateX(-50%);
  width:calc(min(100% - 28px,424px));height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:7px;background:var(--blue);
  font-size:14px;font-weight:800
}
.home-indicator{
  position:fixed;z-index:6;bottom:2px;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:3px;background:#aaa;opacity:.8
}
@media(max-width:370px){
  .header{gap:10px;padding:0 12px}
  .logo{width:118px}.logo strong{font-size:24px}
  .auth .btn{padding:0 12px}
  .promo-wrap{padding-left:12px;padding-right:12px}
  .promo{flex-basis:calc(100vw - 24px);width:calc(100vw - 24px);height:auto;aspect-ratio:369/205}
  .tabs{gap:8px;padding:0 10px}.tabs a{font-size:12px}
  .games{padding-left:12px;padding-right:12px}
}