:root{
  --bg:#041b2f; --outer:#192b3b; --blue:#4296ec; --blue-2:#1d56a6; --card:#14304b; --card-hi:#1c4266; --line:#2c5278;
  --text:#f3f7fb; --muted:#9db4cb; --gold:#e3ad4a; --gold-ink:#2a1a04;
  box-sizing:border-box; color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eaf1f8; --outer:#c3d3e2; --blue:#1f6fd0; --blue-2:#1558ad; --card:#ffffff; --card-hi:#f1f6fb; --line:#b4c9dc;
    --text:#0a1b2b; --muted:#4a6379; --gold:#c4851c; --gold-ink:#ffffff; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#eaf1f8; --outer:#c3d3e2; --blue:#1f6fd0; --blue-2:#1558ad; --card:#ffffff; --card-hi:#f1f6fb; --line:#b4c9dc;
  --text:#0a1b2b; --muted:#4a6379; --gold:#c4851c; --gold-ink:#ffffff; color-scheme:light;
}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0; min-height:100%; background:var(--outer); color:var(--text); padding:0 12px;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.page{max-width:460px; margin:16px auto; min-height:calc(100vh - 32px); position:relative; overflow:hidden; background:var(--bg); border-radius:32px}

/* HEROOOOO SUDAAAAAA */
.hero{
  position:relative; padding:28px 24px 0; text-align:center; border-radius:32px 32px 0 0;
  background:linear-gradient(180deg,#000 0%,#000 38%,var(--bg) 100%);
}
.logo{
  display:block; width:min(260px,66vw); aspect-ratio:1; margin:0 auto;
  image-rendering:pixelated; mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 52%,transparent 96%);
  animation:float 3.2s steps(4,end) infinite;
}
@keyframes float{50%{transform:translateY(-6px)}}
h1{
  font-family:"Anton",Impact,"Arial Narrow",sans-serif; font-weight:400; font-size:48px; line-height:1.05;
  letter-spacing:.03em; margin:-44px 0 12px; position:relative; left:4px;
}
.bio{margin:0 auto; max-width:32ch; color:var(--muted); font-size:15px; line-height:1.5}

.socials{display:flex; justify-content:center; gap:10px; margin:20px 0 26px}
.socials a{
  width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
  background:var(--card); border:2px solid var(--blue-2); color:var(--blue);
  transition:transform .12s, background .12s;
}
.socials a:hover{background:var(--card-hi); transform:translateY(-2px)}
a:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
svg.i{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
svg.i .f{fill:currentColor; stroke:none}

.content{padding:0 16px 28px}

/* IGRA */
.game{
  display:block; text-decoration:none; color:var(--text); background:var(--card);
  border:2px solid var(--line); border-radius:18px; padding:8px;
  box-shadow:0 5px 0 var(--line); transition:transform .12s, box-shadow .12s;
}
.game:hover{transform:translateY(2px); box-shadow:0 3px 0 var(--line)}
.game img{display:block; width:100%; height:auto; border-radius:11px; image-rendering:pixelated}
.game-row{display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 6px 6px}
.game-row b{font-size:14px}

.links{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.link{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);
  background:var(--card); border:2px solid var(--line); border-radius:14px; padding:12px 16px;
  box-shadow:0 4px 0 var(--line); font-weight:700; font-size:15px;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.link:hover{background:var(--card-hi); transform:translateY(2px); box-shadow:0 2px 0 var(--line)}
.link .ic{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:#fff; display:grid; place-items:center; flex:none}
footer{padding:8px 16px 28px; color:var(--muted); font-size:12px; display:flex; justify-content:center; align-items:center; gap:6px; line-height:1}
footer svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; flex:none}
@media (prefers-reduced-motion: reduce){.logo{animation:none} *{transition:none!important}}