:root{
  --canvas:#020916;
  --canvas-deep:#010611;
  --surface:#07182b;
  --surface-raised:#0a2037;
  --blue:#168cff;
  --blue-deep:#0756cc;
  --orange:#ff7a00;
  --orange-light:#ff9a1f;
  --text:#f4f7fb;
  --muted:#a9b3c1;
  --line:rgba(83,143,202,.46);
  --warm-line:rgba(255,143,31,.62);
  --shadow:0 14px 38px rgba(0,0,0,.38);
  --radius:16px;
  --gutter:17px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#d7dae1}
body{
  margin:0;
  color:var(--text);
  background:#d7dae1;
  font-family:Inter,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.touch-target{min-height:44px}
.icon{
  display:block;
  width:24px;
  height:24px;
  flex:0 0 auto;
}
.app-shell{
  position:relative;
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  overflow:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 75% 8%,rgba(8,92,219,.19),transparent 30%),
    linear-gradient(180deg,var(--canvas-deep),var(--canvas) 25%,#020b19);
  box-shadow:0 0 54px rgba(0,0,0,.28);
}

.site-header{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  min-height:67px;
  padding:10px var(--gutter);
  background:rgba(1,7,18,.96);
  border-bottom:1px solid rgba(39,101,168,.32);
}
.brand,.footer-brand{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#4a99ff;
  font-style:italic;
  font-weight:950;
  letter-spacing:-.045em;
}
.brand{font-size:1.34rem}
.brand-shield{
  position:relative;
  display:grid;
  place-items:center;
  width:37px;
  height:42px;
  flex:0 0 auto;
  color:#28a0ff;
  background:linear-gradient(160deg,#ff9a16,#ff6c00);
  clip-path:polygon(50% 0,95% 16%,86% 78%,50% 100%,14% 78%,5% 16%);
}
.brand-shield::before{
  position:absolute;
  inset:4px;
  content:"";
  background:#07172d;
  clip-path:inherit;
}
.brand-shield span{
  position:relative;
  z-index:1;
  font-size:.82rem;
  font-style:normal;
  font-weight:950;
  letter-spacing:-.04em;
}
.brand-word{
  white-space:nowrap;
  background:linear-gradient(180deg,#6bb2ff,#2c73dd);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:7px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:9px;
  color:#fff;
  font-size:.73rem;
  font-weight:850;
  line-height:1;
  letter-spacing:.01em;
  text-align:center;
  transition:transform .18s ease,filter .18s ease,border-color .18s ease;
}
.button:active{transform:translateY(1px) scale(.99)}
.button:focus-visible,.faq-button:focus-visible,.bottom-nav-item:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}
.button-orange{
  background:linear-gradient(180deg,#ff941c,#ff6e00);
  border-color:#ffb344;
  box-shadow:
    0 0 0 1px rgba(255,111,0,.28),
    0 0 16px rgba(255,111,0,.43),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.button-blue-outline{
  color:#e8f4ff;
  background:linear-gradient(180deg,rgba(11,31,58,.82),rgba(4,18,36,.9));
  border-color:var(--blue);
  box-shadow:
    0 0 12px rgba(22,140,255,.22),
    inset 0 0 14px rgba(22,140,255,.08);
}
.button-large{
  min-height:46px;
  padding:0 21px;
  font-size:.78rem;
}

.hero{
  position:relative;
  min-height:334px;
  overflow:hidden;
  isolation:isolate;
  background:#020916;
  border-bottom:1px solid rgba(22,140,255,.23);
}
.hero-image{
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:63% center;
}
.hero-edge{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(2,9,22,.98) 0%,rgba(2,9,22,.89) 28%,
      rgba(2,9,22,.24) 57%,rgba(2,9,22,.02) 100%),
    linear-gradient(0deg,rgba(2,9,22,.82) 0%,transparent 24%);
}
.hero-copy{
  width:58%;
  padding:28px 0 18px var(--gutter);
}
.hero-brand{
  margin:0 0 12px;
  color:#eef5ff;
  font-size:2.05rem;
  font-style:italic;
  font-weight:950;
  letter-spacing:-.055em;
  text-shadow:0 4px 10px rgba(0,0,0,.55);
}
.hero h1{
  margin:0;
  color:#fff;
  font-size:1.42rem;
  font-weight:950;
  line-height:1.08;
  letter-spacing:-.035em;
  text-shadow:0 3px 12px rgba(0,0,0,.76);
}
.hero-subtitle{
  margin:10px 0 0;
  color:#e7edf6;
  font-size:.72rem;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
}
.hero-subtitle b{color:var(--orange);font-size:.65rem}
.hero-actions{
  display:grid;
  gap:7px;
  width:174px;
  margin-top:15px;
}
.hero-copy>small{
  display:block;
  margin:9px 0 0 41px;
  color:#cbd3df;
  font-size:.58rem;
}
.hero-copy>small b{color:var(--orange)}

.trust-strip{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:-1px var(--gutter) 0;
  overflow:hidden;
  background:
    linear-gradient(110deg,rgba(8,28,51,.96),rgba(7,20,38,.98));
  border:1px solid rgba(92,132,172,.58);
  border-radius:13px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04);
}
.trust-strip article{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  padding:12px 6px;
}
.trust-strip article+article{
  border-left:1px solid rgba(92,132,172,.42);
}
.trust-strip .icon{
  width:28px;
  height:28px;
  color:#35a5ff;
  filter:drop-shadow(0 0 7px rgba(53,165,255,.32));
}
.trust-strip strong,.trust-strip small{
  display:block;
  white-space:nowrap;
}
.trust-strip strong{
  font-size:.63rem;
  font-weight:850;
}
.trust-strip small{
  margin-top:2px;
  color:var(--muted);
  font-size:.52rem;
}

.section{padding:19px var(--gutter)}
.section-title{
  display:grid;
  grid-template-columns:minmax(18px,1fr) auto minmax(18px,1fr);
  align-items:center;
  gap:10px;
  text-align:center;
}
.section-title h2{
  margin:0;
  color:#f0f4fa;
  font-size:1.05rem;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.025em;
}
.section-title>span{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue));
}
.section-title>span:last-child{
  background:linear-gradient(90deg,var(--blue),transparent);
}
.section-lead{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.65rem;
  text-align:center;
}
.game-section{padding-top:13px}
.game-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:12px;
}
.game-card{
  position:relative;
  min-width:0;
  min-height:0;
  aspect-ratio:2.05/1;
  overflow:hidden;
  background:#071426;
  border:1px solid rgba(255,151,29,.66);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.game-card-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .24s ease;
}
.game-card:hover .game-card-image{transform:scale(1.025)}
.game-card-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 38%,rgba(1,7,16,.78) 100%),
    linear-gradient(90deg,rgba(1,7,16,.18),transparent 48%);
}
.game-card strong{
  position:absolute;
  left:10px;
  bottom:8px;
  z-index:2;
  color:#fff;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:-.02em;
  text-shadow:0 2px 5px rgba(0,0,0,.85);
}
.game-card-arrow{
  position:absolute;
  right:7px;
  bottom:5px;
  z-index:2;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  color:var(--orange);
}
.game-card-arrow .icon{width:19px;height:19px;stroke-width:3}

.register-panel{
  position:relative;
  min-height:169px;
  margin:0 var(--gutter) 4px;
  overflow:hidden;
  isolation:isolate;
  background:#07182b;
  border:1px solid rgba(44,147,255,.82);
  border-right-color:rgba(255,146,24,.88);
  border-radius:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.register-panel>img{
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.register-edge{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(5,23,44,.98) 0%,
    rgba(5,23,44,.88) 46%,rgba(5,23,44,.08) 72%);
}
.register-copy{
  width:63%;
  padding:24px 0 17px 20px;
}
.register-copy h2{
  margin:0;
  font-size:1.15rem;
  font-weight:950;
  line-height:1.05;
  letter-spacing:-.035em;
}
.register-copy h2 span{color:#2398ff}
.register-copy p{
  margin:7px 0 12px;
  color:#c1cad6;
  font-size:.65rem;
}
.register-copy .button{
  width:164px;
  min-height:39px;
}
.register-copy small{
  display:block;
  margin-top:7px;
  color:#c1cad6;
  font-size:.55rem;
  text-align:center;
}
.register-copy small a{color:#40a7ff}

.steps-section{padding-top:1px}
.steps{
  display:grid;
  grid-template-columns:1fr 19px 1fr 19px 1fr;
  align-items:center;
  margin-top:11px;
  padding:9px 8px;
  background:linear-gradient(180deg,#07192e,#051426);
  border:1px solid rgba(92,132,172,.56);
  border-radius:11px;
}
.steps article{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
}
.steps article>.icon{
  width:31px;
  height:31px;
  color:#e7f4ff;
}
.steps article div{min-width:0}
.steps b,.steps strong{display:block}
.steps b{
  color:var(--orange);
  font-size:.72rem;
  line-height:1;
}
.steps strong{
  margin-top:3px;
  font-size:.59rem;
  line-height:1;
  white-space:nowrap;
}
.step-line{
  position:relative;
  height:1px;
  background:linear-gradient(90deg,transparent,#42a8ff,transparent);
}
.step-line::after{
  position:absolute;
  top:50%;
  left:50%;
  width:5px;
  height:5px;
  content:"";
  background:#79c5ff;
  border-radius:50%;
  box-shadow:0 0 8px #2d9fff;
  transform:translate(-50%,-50%);
}

.why-section{padding-top:3px}
.why-list{
  display:grid;
  gap:5px;
  margin-top:10px;
}
.why-row{
  display:grid;
  grid-template-columns:46px 1fr 22px;
  align-items:center;
  gap:8px;
  min-height:58px;
  padding:7px 10px;
  background:linear-gradient(180deg,rgba(8,27,49,.98),rgba(5,18,34,.98));
  border:1px solid rgba(92,132,172,.46);
  border-radius:10px;
}
.why-icon{
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  color:#54adff;
  background:radial-gradient(circle,rgba(37,133,239,.27),rgba(8,26,47,.15));
  border:1px solid rgba(75,161,255,.42);
  border-radius:50%;
  box-shadow:0 0 14px rgba(33,134,244,.23);
}
.why-icon .icon{width:24px;height:24px}
.why-row strong,.why-row small{display:block}
.why-row strong{font-size:.72rem;font-weight:850}
.why-row small{margin-top:3px;color:var(--muted);font-size:.57rem}
.row-chevron{width:18px;height:18px;color:#e9f4ff}

.faq-section{padding-top:1px;padding-bottom:10px}
.faq-list{
  margin-top:9px;
  overflow:hidden;
  background:linear-gradient(180deg,#07182a,#041120);
  border:1px solid rgba(92,132,172,.48);
  border-radius:10px;
}
.faq-item+.faq-item{border-top:1px solid rgba(92,132,172,.38)}
.faq-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:39px;
  padding:7px 12px;
  color:#eaf0f7;
  background:none;
  border:0;
  font-size:.65rem;
  font-weight:650;
  text-align:left;
  cursor:pointer;
}
.faq-chevron{
  width:16px;
  height:16px;
  transition:transform .2s ease;
}
.faq-button[aria-expanded="true"] .faq-chevron{transform:rotate(90deg)}
.faq-panel{padding:0 12px 10px}
.faq-panel p{
  margin:0;
  color:var(--muted);
  font-size:.62rem;
  line-height:1.5;
}

.site-footer{
  padding:11px var(--gutter) 10px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid rgba(35,139,244,.38);
}
.footer-map{
  width:100%;
  margin:0 0 12px;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#07182b;
  border:1px solid rgba(35,139,244,.38);
  border-radius:10px;
}
.footer-map iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.footer-brand{
  justify-content:center;
  min-height:35px;
  font-size:1.1rem;
}
.footer-brand .brand-shield{width:28px;height:32px}
.footer-brand .brand-shield span{font-size:.61rem}
.site-footer p{
  margin:4px 0;
  font-size:.55rem;
}
.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  font-size:.51rem;
}
.footer-links span{color:var(--orange)}
.site-footer>small{
  display:block;
  margin-top:4px;
  color:#c8d0db;
  font-size:.52rem;
}
.bottom-nav{
  position:sticky;
  bottom:0;
  z-index:30;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:68px;
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(3,12,26,.98);
  border-top:1px solid #1d80e5;
  box-shadow:0 -10px 25px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
}
.bottom-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#c3cad5;
  font-size:.54rem;
}
.bottom-nav-item .icon{width:24px;height:24px}
.bottom-nav-item.is-active{color:var(--orange)}

.breadcrumbs{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:39px;
  padding:6px var(--gutter);
  color:var(--muted);
  background:#04101e;
  border-bottom:1px solid rgba(61,118,174,.3);
  font-size:.62rem;
}
.breadcrumbs a{color:#5cb2ff}
.breadcrumbs .icon{width:12px;height:12px}
.category-hero{
  position:relative;
  min-height:275px;
  overflow:hidden;
  isolation:isolate;
}
.category-hero>img{
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.category-hero-edge{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(2,9,22,.98),rgba(2,9,22,.82) 50%,
    rgba(2,9,22,.06) 79%);
}
.category-hero-copy{
  width:66%;
  padding:35px 0 24px var(--gutter);
}
.category-hero h1{
  margin:0;
  font-size:1.33rem;
  font-weight:950;
  line-height:1.08;
  letter-spacing:-.035em;
}
.category-hero p{
  margin:10px 0 15px;
  color:#c4ceda;
  font-size:.68rem;
  line-height:1.5;
}
.content-section h2,.responsible-panel h2,.category-cta h2{
  margin:0;
  font-size:1.05rem;
  line-height:1.2;
}
.content-section>p,.responsible-panel p,.category-cta p{
  color:var(--muted);
  font-size:.68rem;
  line-height:1.55;
}
.feature-list{display:grid;gap:7px;margin-top:13px}
.feature-row{
  display:grid;
  grid-template-columns:35px 1fr;
  gap:9px;
  padding:10px;
  background:linear-gradient(180deg,#081c31,#061527);
  border:1px solid rgba(73,129,184,.46);
  border-radius:10px;
}
.feature-row>b{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  color:var(--orange);
  background:#0c2540;
  border-radius:50%;
  font-size:.65rem;
}
.feature-row strong{font-size:.72rem}
.feature-row p{margin:3px 0 0;color:var(--muted);font-size:.62rem;line-height:1.4}
.responsible-panel{
  display:grid;
  grid-template-columns:55px 1fr;
  gap:10px;
  margin:0 var(--gutter);
  padding:14px;
  background:linear-gradient(135deg,#09213a,#07172a);
  border:1px solid rgba(33,145,255,.5);
  border-radius:13px;
}
.responsible-panel p{margin:5px 0 0}
.responsible-icon{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  color:#53adff;
  border:1px solid rgba(83,173,255,.5);
  border-radius:50%;
}
.responsible-icon .icon{width:29px;height:29px}
.related-section{padding-top:18px}
.related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
}
.related-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  aspect-ratio:1.7/1;
  border:1px solid rgba(255,151,29,.52);
  border-radius:10px;
}
.related-card::after{
  position:absolute;
  inset:0;
  content:"";
  background:linear-gradient(180deg,transparent 30%,rgba(2,8,18,.84));
}
.related-card img{width:100%;height:100%;object-fit:cover}
.related-card strong{
  position:absolute;
  left:9px;
  bottom:7px;
  z-index:2;
  font-size:.68rem;
}
.related-card>.icon{
  position:absolute;
  right:7px;
  bottom:5px;
  z-index:2;
  width:18px;
  height:18px;
  color:var(--orange);
}
.category-cta{
  margin:0 var(--gutter) 15px;
  padding:18px;
  text-align:center;
  background:
    radial-gradient(circle at 80% 0,rgba(31,136,248,.23),transparent 44%),
    linear-gradient(180deg,#081d33,#051426);
  border:1px solid rgba(255,142,25,.55);
  border-radius:13px;
}
.category-cta p{margin:7px 0 13px}
.not-found{
  display:grid;
  place-items:center;
  min-height:560px;
  padding:30px;
  text-align:center;
}
.not-found>span{color:var(--orange);font-size:4rem;font-weight:950}
.not-found h1{margin:0;font-size:1.6rem}
.not-found p{color:var(--muted)}
.dmca-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
}
.dmca-badge img{
  display:block;
  width:120px;
  height:auto;
}

@media(max-width:370px){
  :root{--gutter:13px}
  .site-header{gap:5px}
  .brand{font-size:1.05rem}
  .brand-shield{width:32px;height:36px}
  .header-actions{gap:5px}
  .header-actions .button{min-height:38px;padding:0 10px;font-size:.62rem}
  .hero-copy{width:62%}
  .hero h1{font-size:1.2rem}
  .hero-subtitle{font-size:.62rem}
  .trust-strip article{display:grid;place-items:center;gap:3px;text-align:center}
  .trust-strip .icon{width:23px;height:23px}
  .trust-strip strong{font-size:.56rem}
  .trust-strip small{font-size:.46rem}
  .section-title h2{font-size:.93rem}
  .register-copy{width:69%;padding-left:15px}
  .steps{grid-template-columns:1fr 10px 1fr 10px 1fr;padding-inline:4px}
  .steps article{display:grid;place-items:center;text-align:center}
  .steps article>.icon{width:26px;height:26px}
  .steps strong{font-size:.52rem}
}

@media(min-width:700px){
  body{padding:24px 0}
  .app-shell{border-radius:18px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}